Day41
Day 41
Redux
- Prop Drilling 문제를 해결하기 위해 등장하였다.
- Context API는 React 내장 API이다.
- Thrid Party 라이브러리
- 미들웨어 기능 제공
- 성능 최적화 기능
- Context API와 useReducer를 함께 쓰는 것과 비슷하다.
- 하나의 Provider안에 모든 데이터가 기록된다.
- 진실은 하나의 근원으로부터
- Context API는 변경이 발생하는 경우에 모든 consumer를 리렌더링하게 하지만 redux는 사용하는 부분만 리렌더링하도록 최적화하고 있다.
- 상태는 읽기 전용이다.
- 상태에 접근하기 위해선 반드시 action이 필요하고 해당 action을 통해 상태가 변경되도록 해야 한다.
- 변화는 순수 함수로 작성되어야 한다.
- reducer안에 네트워크 로직이 들어가서는 안된다.
Todo 프로젝트를 Redux로 리팩토링하기 (1)
Redux
- Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다.
- Redux를 React나 다른 뷰 라이브러리와 함께 사용할 수 있다. Redux는 매우 작지만(의존 라이브러리 포함 2kB), 사용 가능한 애드온은 매우 많다.
Redux Toolkit
- Redux Toolkit은 redux core를 포함해서 여러가지 필요한 library를 함께 설치할 수 있는 모음. 편의를 위해서 사용하나 이번에는 redux-toolkit을 사용하지 않고 바로 redux core를 사용해서 사용한다.
Redux devtools
- 편하게 데이터를 추적하고 관리할 수 있도록 도와주는 chrome 개발툴이다.
3가지 원칙
진실은 하나의 근원으로부터
애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장된다. Context API는 변경이 발생하는 경우 모든 Consumer components를 리렌더링하지만 redux는 사용하는 부분만 리렌더링 하도록 최적화를 하고 있다. 따라서 개발자는 조금 더 편하게 개발할 수 있다.
상태는 읽기 전용이다.
상태를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 액션 객체를 전달하는 방법뿐이다. 개발자가 직접 상태에 접근하여 변경할 수 없다. 반드시 액션을 통해 reducer를 실행하고 reducer가 상태를 변화하도록 만들어야 한다. 이렇게 함으로써 기록을 남길 수 있고 직렬화할 수 있으며 테스트나 디버깅을 위해서도 재현하는 것이 가능해진다.
변화는 순수 함수로 작성되어야한다
액션에 의해 상태 트리가 어떻게 변화하는 지를 지정하기 위해 프로그래머는 순수 리듀서를 작성해야한다. reducer안에 네트워클 로직이 들어가선 안된다. 애플리케이션이 성장해나가면 상태 트리의 특정한 부분들을 조작하는 더 작은 리듀서들로 나누는 것도 가능하다. 리듀서는 그저 함수이기 때문에 호출되는 순서를 정하거나 추가적인 데이터를 넘길 수도 있다. 심지어 페이지네이션과 같이 일반적인 재사용 가능한 리듀서를 작성하는 것도 가능하다.
Context API로 만들어진 To do 프로젝트를 Redux를 이용하여 리팩토링 한다.
redux-logger
상태가 변경될 때마다 console에 로그를 찍어주는 middleware 라이브러리이다.
chrome 플러그인 devtools
해당 플러그인을 사용하기 위해선 redux-devtools-extension이라는 라이브러리를 먼저 설치해주어야 한다.
type이 지정되어 있기 때문에 별도로 type까지 설치해줄 필요는 없다.
redux-persist
상태가 로컬 or 세션 스토리지를 통해 남아있을 수 있게 해주는 라이브러리이다.
추천
redux를 사용하면 설정해야 할 것도 많고 추가해야할 것도 많고 사용하기도 복잡하다. 따라서 프로젝트가 작다면 Context API를 쓰고 점점 커진다면 Redux를 사용하는 것을 추천한다.