React에는 상태관리를 전역적으로 하기 위해 Context API 도 존재하며, Redux, Recoil 등 라이브러리도 있습니다.
그 중 대중적으로 사용되는 것은 Redux 지만 Recoil이 Redux에 비해 사용하기 쉽다고 말하곤 합니다.
Recoil을 정리하기 이전에 React의 상태 관리 전반적인 흐름에 대해 알아볼려고 합니다.
잠깐.. 💡 React의 데이터 플로우
Flux Architecture
대규모 어플리케이션에서 보다 일관된 데이터 관리를 위해 고안되었습니다.
기존에 보편적으로 사용되던 MVC 패턴의 사용 시 데이터 흐름의 복잡도가 올라가는 문제 발생했습니다.
Flux 아키텍처는 단방향으로 데이터가 흐를 수 있도록 설계되었습니다.
💡 데이터가 단방향으로 흐르게 설계되었다는 점을 항상 기억 합시다
✅ 상태관리 히스토리
기본적인 props를 통한 state 전달
단방향 데이터 바인딩으로 인한 Props drilling이 문제가 되었습니다.
props 가 깊고 많을 수록 추적하고 관리하기 어려워집니다.
전역적인 상태 관리의 필요성이 대두되었습니다.
Redux
회사에서도 사용하고 가장 대중적이라 한 번쯤은 사용하게 되는데.. 비동기 처리까지 들어가면 코드 양이 어마어마..
Flux 아키텍쳐를 참고하여 Redux가 만들어졌습니다.
다른 프레임워크에서도 사용 가능한 라이브러리입니다.
dispatch 관리를 위해 redux-thunk, redux-saga 등의 미들웨어 필요합니다. (비동기 처리 복잡함)
보일러플레이트 코드가 많습니다.
react-toolkit의 등장으로 사용이 간편해졌습니다.
현재까지 가장 인기 있는 React 상태관리 라이브러리입니다.
MobX
사용해본 적은 없으나 다수의 말..
Redux와 마찬가지로 React에 종속적이지 않은 라이브러리입니다.
비교적 적은 보일러 플레이트 코드로 좀 더 간단하게 코드를 작성할 수 있습니다.
Redux와 달리 다수의 store를 사용할 수 있습니다.
객체지향적으로 설계되었습니다.
비교적 낮은 러닝 커브를 가지고 있습니다.
devTools, 커뮤니티가 다소 부족한 상태입니다.
context API
확실히 간단한 프로젝트 할 때는 유용했습니다.
v16.8 부터 제공되는 React 내장 API 입니다.
외부 라이브러리 없이 상태 관리를 할 수 있습니다.(소규모 프로젝트에서 적합)
상태값을 변경하면 Provider로 감싼 모든 컴포넌트가 리렌더링 되는 문제 발생하여 성능 최적화가 별도로 필요합니다.
useMemo를 통해 Provider의 value props를 메모이제이션 하거나 독립적인 context를 만들면 리렌더링을 줄일 수 있습니다.
Recoil
이번에 한번 공부하며 정리해보려고 합니다..!
Facebook에서 출시된 React 전용 상태관리 라이브러리입니다.(React에 최적화)
비교적 가장 최근에 나온 라이브러리 입니다.