useState는 컴포 내부에 state를 만들고, 함수를 이용하여 state를 바꾼다. 그렇기 때문에 state는 컴포넌트에 종속된다. 만약 우리가 원하는 state를 자식 또는 자식의 자식에서 사용한다면 props와 state를 바꾸기 위한 함수를 내리고 또 내리는 Prop Drilling(프로퍼티 내리꽂기)가 발생한다. 물론 Prop Drilling이 나쁘다는 것은 아니다. 하지만 SPA(Single Page Application)의 규모가 커지고, 컴포넌트의 수가 많아지게 되면서 Prop Drilling은 문제를 일으키게 된다. 이러한 state의 컴포넌트 종속성을 탈피하고, 어느 위치에 있는 상관없이 단 한번에 상태를 받을 수 있도록 Redux가 생겨났다.
Redux의 기본 원리
Redux는 flux 패턴을 따른다. flux 패턴은 기존 MVC 패턴이 갖고 있던, 앱의 규모에 따른 데이터 흐름의 복잡도 증가를 해결하기 위해 데이터를단방향으로만으로만 변경할 수 있도록 만든 것이다.
Action > Dispatch > Store > ViewStore
Store는 앱의 모든 state를 관리한다. 규모가 커지는 경우에는 state를 카테고리별로 분류하는 경우가 일반적이다.
Action
Store에 있는 state에 접근하려면 Action을 거쳐야 한다.
1. Store에 대한 변경이 필요한 경우 Action을 발행한다.
2. Reducer가 Action의 발생을 감지하면, state가 변경된다.
- type: 액션의 종류를 한 번에 식별할 수 있는 문자열 혹은 심볼
- payload: 액션의 실행에 필요한 임의의 데이터(매개변수)
Reducer
Reducer는 이전 state와 Action을 합쳐 새로운 state를 만든다. 중요한 것은 초기 상태는 Reducer의 기본 인수에서 정의된다는 것, 또 하나는 상태가 변할 때 전해진 state는 그 자체의 값으로 대체 되는 것이 아니라, 새로운 것이 합성되는 것처럼 쓰인다는 것이다.
Redux의 3가지 원칙
진실은 하나의 근원으로부터
애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장된다.
상태는 읽기 전용이다
상태를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 액션 객체를 전달하는 방법뿐이다.
변화는 순수 함수로 작성되어야 한다.
액션에 의해 상태 트리가 어떻게 변화하는 지를 지정하기 위해 순서 리듀서를 작성해야 한다.
