redux

상태의 전역 관리

웹 페이지의 다크모드, 언어설정 등은 모든 컴포넌트에 적용되어야 하기 때문에 전역 상태로 관리될 필요가 있다.

상태 관리 툴

• React Context
• Redux
• MobX

등이 있다.

state

리액트에서 state는 컴포넌트 내에서 관리되고 하향식으로 전달된다.
자식끼리 전달할 일이 많으면 관리가 굉장히 복잡해지는 상황이 벌어진다.(props drilling)

redux 3원칙

1. single source of truth - 하나의 데이터는 하나의 저장공간(store)에서 온다.
2. state is read-only - react에서 setState함수로만 변경할 수 있었던 것처럼 redux에서는 action으로만 변경이 가능
3. Changes are made with pure functions - reducer와 연결되는 개념

store

컴포넌트와 별개로 store라는 공간이 있다. state는 store에 저장된다.

action

자바스크립트 객체. 스토어에게 app의 데이터를 운반함 type, 내용 속성으로 객체 안에 담음
데이터 운반 과정에서 reducer를 거쳐감.
요약 : Action객체가 dispatch메소드에 전달되고 그게 reducer를 호출해서 store에 새로운 state를 생성함
이 과정을 하는 방법은 두가지가 있다.
1. map state props
2. redux hooks – 이게 좀더 최근 방법으로 많이 쓰인다.

redux의 장점

1. 상태를 예측 가능하게 만듬.
2. 유지보수에 용이 (컴포넌트로 state를 계속 내려주고 받으면 디버그가 힘들다.)
3. 디버그에 유리(redux devo툴 이용)
4. 테스트를 붙이기 쉬움(순수함수를 사용하기 때문)