redux VS contextAPI

redux를 처음 배우고 알게된 것은 부트캠프를 수강하면서였다. 당시에는 상태관리가 무엇인지는 알겠는데 redux가 동작하는 방법을 제대로 이해하지 못하였고, 상태관리의 필요성이 느껴질때면 recoil이나 context API를 사용해왔다.

처음 recoil은 부트캠프에서 프로젝트를 진행하면서 처음 사용해보게 되었는데, 당시 팀원 모두가 redux를 제대로 이해하지 못한 상태에서 프로젝트를 진행하게 되었고, 어떤 상태관리를 사용해야할까 찾아보다 recoil이라는 상태관리 툴을 알게 되었고, 하나의 저장소(atom)에 모든 상태를 저장해두고 useState와 비슷한 개념인 useRecoilState라는 함수를 사용해 useState처럼 사용할 수도 있었고, 값만 사용하는 함수인 useRecoilValue, 상태를 업데이트하는 함수인 useSetRecoilState를 따로따로 사용하여 상태를 공유할 수 있어 이해하기에도 사용하기에도 간편하고 쉬웠다. 무엇보다 리액트 팀에서 제작한 상태관리 툴이다 보니 왠지 더 리액트와 잘 어우러져 사용할 수 있을것 같았다.

const [isOpen, setIsOpen] = useRecoilState(modalState);

이후 개인 프로젝트를 하거나 과제를 할 때는 항상 context api를 활용해서 상태관리를 해왔었다. 처음에는 props drilling을 피하기 위한 방법으로 사용하기 시작했고, 계속해서 context api를 활용해 온 이유는 따로 라이브러리를 설치하지 않아도 react 자체의 함수로 상태관리를 전역으로 할 수 있었고, redux자체가 무거운 프로그램이다고 알고있어 아직 내가 만들어온 프로젝트에서는 redux를 붙여야 할 만큼 규모가 큰 프로젝트를 제작하진 않았다고 판단해 context api를 활용해서 상태관리를 해왔고, 불편함이 없었다.
그런데 채용공고에서도 redux가 자주 보이고, 많은 사람들이 꼭 배우기도 하니 왜 redux를 써야하는지가 궁금해졌고, 깊게 공부해보기 전에 이 부분을 먼저 알아보기로 했다.

듣고 있던 강의에 나의 궁금증을 해결해 줄 파트가 있어 재빨리 들어보았는데 redux를 사용하는 이유로 크게 2가지의 context api의 단점으로 설명할 수 있었다.

React context의 잠재적 단점

복잡도

애플리케이션의 규모가 커진다면 상당히 복잡해질 수 있다. context api를 사용하면 목적에 따라 context를 분리하게 되고, 그러다 보면 구독 범위를 설정하는 부분에서 너무 많은 context가 중첩될 수 있다.

<AuthContext.Provider>
  <ThemeContext.Provider>
    <UIContext.Provider>
  	  <App />
    </UIContext.Provider>
  </ThemeContext.Provider>
</AuthContext.Provider>

이러한 중첩을 피하기 위해 한가지 context api를 사용하는 방법이 있을 수 있지만 그렇게 되면 로그인 정보, 테마, UI적인 부분과 관련 함수들을 하나의 context에 넣어 관리하다보면 유지 관리가 어려워진다는 단점이 있다.

성능

리액트 팀의 comment에 의하면 테마를 변경하거나 인증을 위한 데이터의 경우에는 자주 변하는 데이터가 아니기 때문에 context api를 사용하기에 최적화되어 있지만 데이터가 자주 변경되는 경우에는 좋지 않다고 언급하면서 모든 상황에서 Flux스러운 상태 전달의 대체재로써 context api를 사용하기에는 아직 부족하다고 언급하였다.

이 comment로 궁금했던 부분이 좀 해소되었다. 확실히 context api를 사용하면서 어떻게 사용하느냐에 따라 flux스럽지 않게 사용하기도 했으니까...!

Redux

반면 redux의 경우 하나의 저장소(store)에 데이터를 저장하고 컴포넌트가 이 저장소를 구독해 필요한 데이터를 받아 사용할 수 있다.

Flux

저장된 데이터를 변경할 때에는 데이터를 직접 조작하지 않는다.
flux 패턴으로 한방향으로 데이터가 흐르게 되어있고, store에 저장된 데이터를 바꾸기 위해서는 reducer 함수를 이용해 변경하여야 한다.
reducer(!==useReducer) 함수가 동작하기 위해서는 각 component에서 action을 보낸다. action에는 어떤 일을 해야하는지가 담겨있고, reducer 함수에서 이 일을 실행해서 실행된 결과로 store에 저장된 해당 데이터가 변경되게 된다.

처음 redux를 배울때에는 어떻게 흘러가는지 감도 잡히지 않아서 코드만 따라치다가 끝났는데 당연함.. 이때 react를 배운지 2주차쯤 되었을때임..., 이제는 어떻게 흘러가는지 보이고 어떻게 써야하는지도 감이 잡히고 있다! 물론, 아직 강의 17분 들음..ㅎ 왜 contextAPI 대신 redux를 써야하는지도 확실히 알았으니 redux deep dive 하러 가야쥐,,!

출처: udemy React 완벽 가이드 with Redux, Next.js, TypeScript