Redux

props 문법의 한계 state를 하위 컴포넌트에서 그대로 쓰면 에러가 생긴다. 이때 props라는 문법으로 전송하면 마음대로 갖다 쓸 수가 있다. 허락받는 개념이라고 생각하면 된다. 그런데 만약 컴포넌트가 백만 개 중첩되어 있다면 state를 전해주기 위해 props 문법을 과용하게 된다. 그게 불편해서 Redux라는 라이브러리 문법을 사용하는 것이다. Redux를 설치하면 개발자가 state를 보관할 수 있는 파일을 하나 만들 수 있다. 그럼 여기에 원하는 state를 전부 보관할 수 있게 된다. 그러면 모든 컴포넌트가 이 state를 바로 꺼내다 쓸 수 있다. 이렇게 하면 전체적으로 코드가 간결해진다. Redux 사용을 위한 기본 세팅 방법은 다음과 같다. 이 부분은 따로 이해할 필요 없이 복사 ..

리덕스 미들웨어란? Redux middleware provides a third-party extension point between dispatching an action, and the moment it reaches the reducer. People use Redux middleware for logging crash reporting talking to an asynchronous API routing and more. Redux 미들웨어는 액션을 dispatch해서 전달하고 리듀서에 도달하는 순간 사이에 사전에 지정된 작업을 실행할 수 있게 해주는 중간자이다. 로깅, 충돌 보고, 비동기 API와 통신, 라우팅 등을 위해 Redux 미들웨어를 사용한다. 리덕스 로깅 미들웨어 생성하기 리덕스를 이..

provider로 둘러싸인 컴포넌트에서 store 접근 리액트에 Hooks가 있듯이 리덕스에도 Hooks가 있는데 그게 바로 useSelector와 useDispatch이다. 이 둘을 이용해 provider로 둘러싸인 컴포넌트에서 store에 접근이 가능하다. useSelector useSelector Hooks를 이용해 스토어의 값을 가져올 수 있다. const result: any = useSelector(selector: Function, equalityFn?: Function) 해결 방법 1) Root Reducer에 RootState 타입을 생성하기 2) 생성한 RootState을 State 객체에 제공하기 3) useDispatch: store에 있는 dispatch 함수에 접근하는 hooks..

Provider란? 의 구성 요소는 Redux Store 저장소에 액세스해야 하는 모든 중첩 구성 요소에서 Redux Store 저장소를 사용할 수 있게 한다. React Redux 앱의 모든 React 구성 요소는 저장소에 연결할 수 있으므로 대부분의 응용 프로그램은 전체 앱의 구성 요소 트리가 내부에 있는 최상위 수준에서 를 렌더링한다. 그런 다음 Hooks 및 연결 API는 React의 컨텍스트 메커니즘을 통해 제공된 저장소 인스턴스에 액세스할 수 있다. Provider를 렌더링 React Redux 앱의 모든 React 구성 요소는 저장소에 연결할 수 있으므로 대부분의 응용 프로그램은 전체 앱의 구성 요소 트리가 내부에 있는 최상위 수준에서 를 렌더링한다. Todo UI 생성

ToDo 기능 추가 현재까지 만든 Counter 앱에 ToDo 앱을 추가할 것이다. rootReducer와 서브 리듀서 현재까지는 counter 리듀서만 있는데 하나를 더 추가해주려면 rootReducer를 만들어서 그 아래 counter와 todos라는 서브 리듀서를 넣어주면 된다. rootReducer를 만들 때 사용하는 것이 combineReducers이다. createStore에 rootReducer로 대체

Redux is a predictable state container for JavaScript apps. 리덕스는 자바스크립트 애플리케이션을 위한 상태 관리 라이브러리이다. Redux는 State를 관리한다 Redux 데이터 Flow(strict unidirectional data flow) 이전 State과 action object를 받은 후에 next state을 return한다. Reducer는 pure function이므로 reducer 내부에서 하지 말아야 할 것들 인수를 변형한다. API 호출 및 라우팅 전환과 같은 부작용을 발생시킨다. Date.now()나 Math.random()과 같은 순수하지 않은 함수를 호출한다. 는 React Redux에서 제공하는 고차 컴포넌트로, Redux를 R..