Redux vs React Hooks

상태관리 라이브러리들을 적절한 이유 없이 사용해서는 안된다.
과업을 진행하며 상태관리에 대해서 어떠한 라이브러리를 사용할지 고민하던중,
React Hooks에서 useContext와 useReducer에 대해서 알게 되었다.
내용을 보아하니 Redux와 기능이 상당히 유사하다. (전역적인 상태 관리)
하지만 각각의 장단점이 존재하며, 사용하는 이유도 다를 것이라고 한다.
이 부분을 명확하게 파악후 피드백을 받아보려한다.

Redux

리액트 개발의 초창기 (2015~2018)때는 리액트 프로젝트에서 Redux를 사용하는게 일반적 이었다.

React-Redux는 Redux를 사용하기 위해 프로젝트에 import 해야 할 또 다른 JavaScript 라이브러리다.
프로젝트에서 사용하는 상태가 많거나 Props drilling이 너무 심할때, 사용하기 적절하다.
(한마디로 프로젝트 규모가 클때!)

처음 복잡한 구조의 셋업만 마친다면 정말 사용이 간편해진다.
그리고 성능면에서도 리덕스에서는 컴포넌트에서 글로벌 상태의 특정 값을 의존하게 될 때,
해당 값이 바뀔 때에만 리렌더링이 되도록 최적화가 되어있다.

하지만, 라이브러리를 사용하는 것은 프로젝트의 번들 크기를 늘려 앱이 로드되는 데에 걸리는 시간을 증가시킨다.

Redux는 가벼운 라이브러리지만, 셋업 하는데 복잡하며, 번들 크기를 증가시키는 등 사용하는데에 다양한 비용들이 발생한다.

Context API

Context에는 앞서 말한 성능 최적화가 이뤄지지 않았다.
컴포넌트에서 만약 Context의 특정 값을 의존하는 경우,
해당 값 말고 다른 값이 변경 될 때에도 컴포넌트에서는 리렌더링이 발생하게 된다.

예를 들어 useContext를 쓸 때 주의할 사항은, Provider에 제공한 value가 달라지면
useContext를 쓰고 있는 모든 컴포넌트가 리렌더링 된다.
value 안의 상태가 하나라도 바뀌면 객체로 묶여있으므로 전체가 리렌더링 되는 것.
따라서 잘못 쓰면 엄청난 렉을 유발할 수 있다.

그래서 Context 를 사용하게 될 때에는 관심사의 분리가 굉장히 중요하다.
서로 관련이 없는 상태라면 같은 Context 에 있으면 안된다. Context를 따로 따로 만들어주어야 한다.

적절한 최적화 방안은 useMemo 와 useCallback등을 적절히 활용하는 것.
useEffect를 사용하여 렌더링 될 때 console.log로 두번째인자(바뀌는 값)을 넣어서 어떠한 값의 변화로 인한 리렌더링인지 확인할 수 있다.

최종 하위 컴포넌트(td) 값의 변화로 리렌더링 될때 부모 컴포넌트까지 렌더링되지 않도록 memo를 사용하여 props의 값을 기억해준다.

전역적으로 관리해야 할 상태가 많아지는 경우에는 성능을 챙기기 위해선 그만큼 다양한 종류의 Context를 위한 코드를 준비해야 하는 것 이다.

결론

Redux와 React Hooks가 Redux를 대체할 수 있냐는 질문에는 그렇지 않다고 답할 수 있다.
좀 더 명확히 표현하자면, 프로젝트의 종류에 따라 다르다.
만약 개발하고 있는 앱이 많은 상태를 저장할 필요가 없다면,
혹은 컴포넌트 구조가 과도한 prop drilling을 피할 수 있을만큼 단순하다면, 모든 상태 관리 라이브러리는 사용할 필요가 없다.
단순한 앱의 상태는 hooks가 있건 없건, React가 제공하는 것들만으로도 충분히 관리할 수 있다.

• Redux 를 사용한다면 초기 세팅 이후에는 사용이 매우 편리하나, 프로젝트 번들 크기를 증가시킨다.

• 글로벌 상태가 다양해지는 경우는 Context 의 사용은 적합하지 않을 수 있다.

• 리덕스는 dispatch를 통해 state가 동기적으로 변경, useReducer는 비동기적으로 변경

• context api 는 상태 관리에는 어울리지 않는다.
  정적인 값에 가까운 값을 props drilling 대신할 때 적절하다.

참고 사이트

https://delivan.dev/react/stop-asking-if-react-hooks-replace-redux-kr/
https://ridicorp.com/story/how-to-use-redux-in-ridi/
https://www.imaginarycloud.com/blog/react-hooks-vs-redux/
https://blog.logrocket.com/use-hooks-and-context-not-react-and-redux/