useReducer를 사용하지 않고 Redux를 사용하는 이유는?

react에서 useReducer Hooks가 있는데 이와 비슷한 Redux라이브러리가 있는것을 알게 되었다. 둘의 기능이 비슷한데 왜 useReducer를 사용하지 않고 Redux를 사용하는 이유가 궁금하였다.

useReducer

useReducer란 state를 관리하고 업데이트 하는 hook인 useState 를 대체 할 수 있는 hook이다.

그렇다면 useState로도 충분히 상태변화 로직을 구현할 수 있을텐데 왜 사용할까?

useState만으로 상태변화 로직을 구현하면 관리해야하는 상태값이 많아지고 프로젝트 규모가 커지면 어려움이 따른다. 따라서 useReducer를 사용해 해결할 수 있다.

useReducer로 상태를 분리 함으로써 관리하기가 쉬워졌다.

Redux

Redux(리덕스)란 애플리케이션 전체에 대한 상태 중앙 저장소 역할을 하며 action이라는 이벤트를 사용하여 애플리케이션의 상태를 예측 가능한 방식으로 업데이트 하기 위한 상태관리 라이브러리이다.

Redux 흐름

subscribe(상태 변화 감지 요청) -> action(상태변화) -> dispatch(상태 업데이트) -> store(state갱신) -> listener(상태변화 알림)-> 컴포넌트 리렌더링

그렇다면 상태관리는 왜 필요할까?

• 자식 컴포넌트들 간의 직접적인 데이터 전달은 불가능 하다.
• 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다.
• 그런데 자식이 많아진다면 상태 관리가 매우 복잡해진다.
• 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야한다. => Props drilling 이슈가 발생

따라서 redux를 사용하여 props drilling 방지할 수 있기 때문에 필요하다.

Redux와 useReducer 차이

useReducer는 여러 컴포넌트 간에 상태를 공유하려면 컴포넌트 계층 구조를 통해 상태를 전달하므로 props drilling을 방지 할 수는 없다.

그러나, Redux는 애플리케이션의 상태를 전역으로 관리하므로 컴포넌트 간에 상태를 전달하지 않고도 상태에 접근할 수 있다.

따라서, useReducer는 작은 규모의 컴포넌트 내부 상태 관리에 적합하고, Redux는 전역 상태 관리와 복잡한 애플리케이션에서 사용되는 차이가 있다.