[React] 전역 상태 관리 : Redux

전역 상태 관리 방법 중 하나인 Redux.
전역 상태 관리란 앱 전체에 걸쳐 상태를 공유하고 관리하는 것이다.

전역 상태 관리 방법에는 크게 세 가지가 있다.
1. Props Drilling
2. 라이브러리 : Redux, Zustand, Recoil...
3. Context API : 리액트 라이브러리만으로도 전역 상태 관리가 가능하도록 추가된 API

단점

1. 복잡해서 러닝커브
2. 간단한 상태관리라도 처음에 작성해야 할 코드의 양이 많다. (뭘 잔뜩 만들어야 함)

단점 극복

-> Recoil, Zustand: 복잡함을 극복. 쉽게 쓸 수 있도록 개선/개량
-> React Query: 클라이언트 상태 관리에서 비동기 작업이 쉽지 않고 서버 상태와 실시간 동기화 어렵다는 단점을 개선/개량

특징

1. Flux 아키텍처 - 단방향 데이터 흐름
2. 의도된 복잡함 - 데이터를 엄격하게 변경하기 위한 예측 가능하고 유지 보수 가능한 까다로운 구조 (predictable, maintainable)
3. 배우기 까다로움 - 개념과 용어 많음 / 작성해야 하는 코드 양 많음

핵심 개념

Store

• 상태가 저장되는 곳
• 앱 전체에서 하나만 생성하여 사용
• 저장 내 공간은 리듀서 단위로 구분

Reducer

• 저장소에 있는 상태를 변경하는 함수

Redux 마스터를 위한 스토리텔링

• 우리가 Redux를 통해 하는 것: store(저장소)의 값(state, 상태)에 대한 CRUD
• 이 중 읽기(R)는 너무나도 쉽다. useSelector라는 훅을 사용하면 모든 게 끝.
• 하지만 쓰기(CUD)가 좀 까다롭다.
• 지금부터 Reducer를 일종의 공장이라고 생각하자. store에 있는 값을 뚝딱뚝딱 변경하는 일을 하는 공장.
• 그런데 공장은 작업명세서(action)를 전달해 줘야지 그 내용대로 작업을 해 준다.
  • 작업명세서에는 두 가지 정보가 필요하다.
    1. 작업의 종류 (필수 정보) - action.type
    2. 작업을 할 때 필요한 정보 (선택적 정보) -action.payload
• 작업명세서는 작업을 요청하는 곳인 컴포넌트에서 작성한다.
• 작업명세서를 작성한다고 작업이 되는 것이 아니다. 작업명세서를 공장에 전달해 주어야 한다.
  • 컴포넌트는 우체부(dispatch)를 통해 작업명세서를 공장에 보내고, 공장은 이를 받아 처리한다.
• 작업명세서를 매번 직접 쓰는 것은 비효율적이며 휴먼에러의 가능성이 있으므로 작업명세서를 찍어 내는 도구(Action Creator)를 만든다.