Reudx란..?

• 리덕스(Redux) 는 Javascript app을 위한 예측 가능한 상태를 관리하기 위한 라이브러리
• 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜 효율적으로 관리
• 추가적으로, 리덕스의 미들웨어라는 기능을 통해 비동기 작업, 로깅등의 확장적인 작업들을 더욱 쉽게 구현 가능

상태가 예측 가능한 방식(일관된 방식)으로만 업데이트 될 수 있도록 보장하는 규칙과 함께 전체 애플리케이션에서 사용해야하는 상태에 대한 중앙 저장소 역할을합니다.

상태관리의 필요성

애플리케이션 상태 관리(Managing States)는 버그를 최소화 하면서 잘 만들어진 경험(UX)을 사용자에게 제공하는 데 절대적으로 중요합니다. 또한 오늘 날 프론트 엔드 애플리케이션 제작에 있어 가장 어려운 부분 중 하나입니다.

• Redux는 애플리케이션의 상태를 관리하기 위한 견고하고 안정적인 솔루션을 제공한다.
• 여기 저기 혼란스럽게 흩어져 있는 상태를 체게화 하여 애플리케이션을 관리하도록 도와준다.

Redux를 선택하는 이유

logging

• 시스템 동작 시 시스템 상태/작동 정보를 시간의 경과에 따라 기록하는 것을 로깅, 그 기록을 로그라고 한다.
• 상태가 변경될 때마다 상태와 관련된 정보들이 콘솔에 기록되면서 디버깅하기 편안 (redux-logger)

hot reloading

• 코드를 수정하고 화면이 갱신 되어도 애플리케이션의 상태 데이터가 사라지지 않는다. (데이터를 재입력할 필요가 없다는 뜻)
• Redux가 유용한 점이 바로 상태 변환 로직을 hot reloading할 수 있다는 점
• Redux는 상태를 가지고 있는 Store, 상태 변환 로직을 담당하는 Reducer가 분리되어 있기 떄문에 Reducer(상태변환로직)만 갱신하여 상태를 잃어버리지 않는다.

time travel

• 이전의 특정 상태로 돌아가는 것
• 애플리케이션의 특정 상태의 상호작용을 테스트하기가 쉬워진다.

범용성

• 여러 분야나 용도로 널리 쓰일 수 있는 특성
• 리액트 뿐만 아니라 Angular, Vue, vanila.js 등 다양한 framework와 작동되게 설계되었다.

React-Redux VS Context Hook

Redux와 React 자체 기능에 포함된 Context hook은 상태(state)를 가지고 작업을 수행하고 prop-drilling을 피할 수 있다.
하지만 서로 대체제로 사용되는 도구는 아니다. 엄연히 다르다...
위 도구들의 차이점을 알아보자

Prop Drilling?
Prop Drilling 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정입니다

React-Redux와 Context Hook의 차이점

1. Context는 React 구성요소에서만 작동한다.
   • React-Redux는 React 구성 요소 외부를 포함하여 모든 UI에서 작동
2. Context는 ReactDevTools에서 현재 컨텍스트 값을 표시하지만 시간이 지남에 따라 값이 어떻게 변경되었는지에 대한 기록은 표시하지 않는다.
   • React-Redux는 작업 및 시간에 따른 상태 변경 기록을 보여주는 DevTols가 따로 있다.
3. Contetx는 단지 상태를 공유하는 역할만 한다. (상태 관리도구가 아닌이유)
   • React-Redux는 상태를 관리하는 역할까지 ++

상태관리는 다음과 같은 방법을 갖는것을 의미
1. 초기 값을 저장
2. 현재 값 읽기
3. 값 업데이트

React-Redux VS useReducer + Context

useReducer와 Context를 조합하여 상태관리를 하는것은 React-Redux와 사용법이 매우 비슷하다.
그러나 위 두 가지의 사용법은 매우 중요한 차이점을 가지고 있다.

React-Redux와 useReducer + Context의 차이점

1. useReducer와 Context의 조합은 Context에 등록된 값이 하나라도 변경되어도 Context에 등록된 모든 상태를 사용하는 UI가 re-render 된다.
   • 상태값의 크기, 해당 데이터를 사용하는 컴포넌트 수, re-render 빈도에 따라 성능문제 발생위험!
   • React-Redux는 컴포넌트가 store 상태의 특정부분을 구독하고 해당 값이 변경될 떄만 다시 re-render
2. useReduer는 미들웨어가 없다.
   • React-Redux의 미들웨어의 유용한 확장기능을 사용할수 없단얘기!

결론

작업하는 App에 따라 어떤 도구를 사용할지 결정하면 된다.
단지 prop-drilling을 피하는 것이 목적이면 Context를 사용
적당히 복잡한 React 구성요소 상태가 있거나 외부 라이브러리를 사용하고 싶지 않다면 Context + useReducer
시간이 지남에 따라 상태 변경 사항을 추적하고 상태가 변경될 때 특정 요소만 다시 렌더링 되도록 해야하며, Side Effect를 위한 더 강력한 기능이 필요하면 React-Redux를 사용하면 된다.

물론 React-Redux와 useReducer+Context는 서로 대체재가 아니다.
동일한 App에서 함께 사용할 수 있다.
global state에는 React-redux를 더 지역적인 부분에서는 useReducer+Context를, 일부 정적값에서는 Context를..