나는 상태관리 라이브러리로 Recoil 을 선택해 공부하고 사용해왔다.
그런데 이번에 참여한 팀 프로젝트에서 Redux 를 사용한다고하여,
이번 기회에 공부하게되었다.
아무래도 Recoil 보다 Redux 가 많이 사용되고 있기에 공부해야지라고 생각하고 있었는데,
이번 기회에 하게 되어 너무 좋다!
거두절미하고, 시작!
Redux란?
❗리덕스 - 공식
❗리액트에서 리덕스 사용하기 - 공식
리덕스는 오픈 소스 자바스크립트 라이브러리의 일종으로, state를 이용해 웹 사이트 혹은 애플리케이션의 상태 관리를 해줄 목적으로 사용한다.(=>상태관리 라이브러리)
Redux 는 상태관리 라이브러리의 하나로, 인기있는 상태관리 라이브러리이다.
자바스크립트 상태관리 라이브러리이지만, 리액트에서 사용하는 것을 많이 보았다.
🟡 왜 Redux를 사용할까?
Recoil 을 공부하고 사용할 때도 느꼈지만, 프로젝트가 커지고 그만큼 주고 받는 값들이 많아질 수록
상태관리 라이브러리 사용은 필수라고 생각한다.
리액트는 주로 부모 컴포넌트 안에 자식 컴포넌트가 존재하고 state 로 component 의 값을 관리한다.
부모 컴포넌트의 state 데이터를 자식 컴포넌트로 전달할 수 있으나,
자식 컴포넌트들 간의 다이렉트 데이터 전달이 불가능하다.
이말은 즉, 자식 컴포넌트들이 많아진다면 계속해서 상위 컴포넌트에서 하위 컴포넌트로 데이터를 내려주어야하는 상황이 발생한다는 거다. Props drillling 이슈가 발생한다는 것.
이런 복잡성을 해결해주는 것이 상태관리 라이브러리이다.
전역 상태 저장소를 제공해주어 Props drilling 이슈를 해결해주고, 상태를 관리해주는 각종 툴을 제공해준다.
- 장점
- 상태를 예측 가능하게 만든다.(순수함수를 사용하기 때문)
- 유지보수 (복잡한 상태관리와 비교)
- 디버깅에 유리 (redux dev tool 크롬 확장기능으로 편리)
- 테스트를 붙이기 용의
🟡 기본개념 3가지
1. Single source of truth
- 동일한 데이터는 항상 같은 곳에서 가지고 온다.
- 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 뜻이다.
2. State is read-only
- 리액트에서는
setState메소드를 활용해야만 상태변경이 가능하다. - 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.
3. Changes are made with pure functions
- 순수함수로만 변경이 가능하다.
- 리듀서와 연관되는 개념.
- Store(스토어)-Action(액션)-Reducer(리듀서)
🟡 Store, Action, Reducer, dispatch
1. Store(스토어)
- 컴포넌트와 별개로 스토어라는 공간이 있어서, 그 스토어 안에 앱이 필요한 상태(현재상태, 데이터)를 담는다.
- Action 값을 받은
dispatch()메소드가 Reducer 로 전달한 상태값을 여기에 저장한다. - 단 1개의 상태값만 가질 수 있다. 물론 객체 안에 여러가지 프로퍼티를 가질 수 있지만, 커다란 단 1개의 상태값만 가질 수 있다.
2. Action(액션)
dispatch()의 파라미터로 전달될 데이터, 자바스크립트 객체이다.- Action 은 데이터 구분을 위해
type프로퍼티를 무조건 가지고 있어야한다. - 나중에 Reducer 가 Action을 전달받으면 Action의 값에 따라 다른 작업이 이루어진다.
3. Reducer(리듀서)
- Action 의 type 에 따라 변화를 일으키는 함수.
- 즉, Store 에 상태값이 들어가기 전 Action 값에서 전달된 type 의 종류에 따라 어떤 상태값으로 Store 에 리턴될지 정하는 함수이다.
- Action(액션)을 Store(스토어)에 바로 전달하는 것이 아니라, Action 을 Reducer에 전달해야하기 때문!
- 그럼 Reducer가 주문을 보고 Store의 상태를 업데이트하는 것이다.
- Action을 Reducer에게 전달하기 위해서는
dispatch()메소드를 사용해야한다.
즉,
Action 객체가 dispatch() 메소드에 전달 > dispatch(액션) 를 통해 Reducer 를 호출 > Reducer 는 새로운 Store 생성
4. dispatch
- Action 을 Store 에 전달하는 함수
- Store 의 메소드, 상태값 업데이트를 실행하는 함수이다.
dispatch가 실행되면 파라미터로 전달받은 Action 값이 Reducer 의 두 번째 파라미터 객체로 전달된다. 그럼 Reducer 안에 있는 코드들로 인하여 Store 상태값이 저장된다.
