Redux 기초
1. Redux 세 가지 원칙
- Single source of truth : 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다. 즉, 데이터를 저장하는 store라는 하나뿐인 공간이 있다.
- State is read-only : React에서 useState로 state를 변경해주는 것 처럼 Redux에서는 action이라는 객체를 통해서 state를 변경할 수 있다.
- Changes are made with pure function : 변경은 순수함수로만 가능하다. Reducer와 연결되는 개념이다.
2. Redux 기본 개념
정의 : Redux는 자바스크립트 앱에서 예측가능한 상태관리를 해주는 Container.
1) Store : 상태가 관리되는 오직 하나의 공간
컴포넌트들과 별개로 Store라는 공간이 있어서 그 스토어 안에 앱에서 필요한 state를 두고 컴포넌트들에서 state정보가 필요할 때 Store에 접근해서 state 정보를 가져올 수 있다.
2) Action : Simple Javascript Object
Action객체는 type을 비롯한 다양한 데이터가 담긴다. 그리고 Store에게 우리 애플리케이션의 데이터를 운반 해주는 역할을 한다. 타입을 꼭 지정해줘야하고 필요한 정보를 객체안에 담아준다.
3) Reducer : 현재 상태와 Action을 이용해 다음 상태를 만들어 냄
Action을 통해서 우리 앱의 데이터를 Store에 운반을 할 수 있다고 했는데, 그 과정에서 Reducer를 거쳐서 가야한다. Store에는 현재의 state가 있을 것이고, 그 현재 state와 Action을 이용해서 new state를 만들어낼 수 있다. 위의 공식을 따르는 이유는 데이터가 한 방향으로 흘러야하기 때문이다.
*Reducer의 Immutability(불변성)
Reducer 함수를 작성할 때 주의해야 할 점이 있다. 바로 Redux의 state업데이트는 immutable한 방식으로 변경해야 한다는 것이다.
immutable한 방식으로 state를 변경하기 위해서는 Object.assign을 통해 새로운 객체를 만들어 리턴하는 것을 통해 힌트를 얻을 수 있다.
4) Overview
브라우저에서 플러스 버튼을 클릭하는 이벤트가 발생하면 Dispatch의 전달인자로 Action객체를 담아서 Reducer로 전달이 된다. 그럼 이 Reducer는 Action객체의 type에 따라서 다른동작을 수행할 것이다. 그 동작의 수행결과로 새로운 state가 반환된다.
5) Redux에서 이 개념들을 connect할 수 있는 방법 두 가지
- map state props
- Redux Hooks -> 조금 더 직관적이고 최근에 나온 방법.
6) Redux Hooks
- useSelector() : 컴포넌트와 state를 연결하는 역할을 한다. 컴포넌트에서 useSelector메소드를 통해서 store의 state에 접근할 수 있다.
- useDispatch() : Action 객체를 Reducer로 전달해주는 메소드이다. Action이 일어날만한 곳은 클릭 등의 이벤트가 일어나는 컴포넌트일 것이다. 컴포넌트에서 이벤트 핸들러 함수안에 dispatch()로 Action을 호출해서 사용한다.
7) Redux의 장점
- 상태를 예측 가능하게 만들어 준다. → 리듀서라는 것은 순수함수이기 때문에 다음상태가 어떻게 될지 쉽게 예측할 수 있다.
- 유지보수에 용이하다. → React의 복잡한 컴포넌트에서 앱에 props를 내려받기위한 방식으로 작성을 했다면, 버그가 나타났을 때 그 props를 내려준 경로에 있는 모든 컴포넌트들을 수정을 해야하니까 엄청 복잡해진다. 그런데 Redux를 이용을 해서 action과 state log를 기록하면 action이 생겼을 때 어떤 일이 일어나는지 다 추적을 할 수 있기 때문에 디버깅이 굉장히 유리해질 것이다.
- 디버깅에 유리하다 (action과 state log 기록 시) ↵
- 테스트를 붙이기 쉽다. → 순수함수를 사용하기 때문에 테스트를 붙이기 용이하다.
