전체 글218 Async Action 비동기작업 어디서 하느냐가 제일 중요하다. 액션을 분리 dispatch를 할때 비동기 작업 해준다. 리듀서는 동기적인것 dispatch도 동기적인것 App.js import './App.css'; import TodoListContainer from './containers/TodoListContainer' import TodoFormContainer from './containers/TodoFormContainer' import UserListContainer from './containers/UserListContainer'; function App() { return ( ); } export default App; reducer.js import { combineReducers } from 'red.. 2022. 1. 31. Redux 를 React에 연결(라이브러리x) react-redux 라이브러리 안쓰고 연결하기 단일 store을 만들고 subscribe 와 getState를 이용하여 변경되는 state데이터를 얻어 props로 계속 아래로 전달하기 componentDidMount > subscribe componenWillUnMount > unsubscribe index.js ReactDOM.render( , document.getElementById('root') ); store를 props로 내려준다. App.js import logo from './logo.svg'; import './App.css'; import { useEffect, useState } from 'react'; import { addTodo } from './redux/actions'; .. 2022. 1. 21. Redux 개요, 사용 npm i redux Action 액션은 그냥 객체이다. 두가지 형태의 액션 { type : ‘TEST’} // payload없는 액션 { type: ‘TEST’, params : ‘hello’ } // payload 있는 액션 type만이 필수 프로퍼티이며, type은 문자열이다. 액션 생성자 사용 방법 function 액션 생성자(...args) { return 액션; } 액션 생성자를 통해 액션을 만들어 낸다. 만들어낸 액션 객체를 redux store에 보낸다. redux store가 액션 객체를 받으면 스토어의 상태 값이 변경된다. 변경된 상태 값에 의해 상태를 이용하고 있는 컴포넌트가 변경된다. 액션은 스토어에 보내는 일종의 인풋 액션 객체 만들기 action.js export const AD.. 2022. 1. 20. Hooks 동기 state로 관리하면 재사용하기가 어려웠음. 상태를 this.state를 다른데서 다르게 관리 해야하니까.. 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다. 복잡한 컴포넌트 경우 상태관련 로직을 한 공간안에서 묶여있기 때문에 작게 분리하는 것은 불가능 하며, 테스트 하기도 어려움. 또한 상태라이브러리는 많은 추상화, 파일들의 건너뛰기를 요구 하며 재사용하기 어려워졌다. 정리: class의 단점을 보완하면서 / 라이프사이클 등과 관련된 함수를 재사용 가능하도록 한다. 규칙 최상위에서만 hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수내에서 hook실행 x React함수 컴포넌트 내에서만 hook을 호출해야 한다. State Hook 일반 import React from 'rea.. 2022. 1. 9. 이전 1 ··· 6 7 8 9 10 11 12 ··· 55 다음 반응형
