React에서 상태란 컴포넌트에서 관리되는 동적인 정보(데이터)이다. 상태에 따라 View가 렌더링되며, 상태가 변경되면 해당 컴포넌트의 View도 재렌더링되어 바뀌게 된다.
1. Redux
Redux는 전세계 리액트 개발자들이 가장 많이 사용하는 상태 관리 라이브러리이다. Redux는 컴포넌트 바깥에서 전역적으로 상태를 관리한다는 점은 React context와 유사하다. 특징으로, 중앙 집중식 Storage와 상태 업데이트를 위한 Reducer를 사용하고, 단방향 데이터 흐름을 따른다는 점을 들 수 있다.
장점
- 미들웨어를 활용하여 여러 비동기, 로그 작업 등을 처리할 수 있는데 이때 Redux를 위한 라이브러리를 사용하여 더 쉽게 구현이 가능합니다.
- 단방향 데이터 흐름을 따르게, Reducer 등의 단위 테스트가 비교적 쉽다는 장점이 있습니다.
단점
- 간단한 웹앱을 만들 때에도 Action, Reducer, Action Greator 등의 코드를 모두 작성해야 하기에 간단한 웹 앱을 만들 때에는 귀찮게 느껴질 수도 있습니다. 또한, 처음 상태 관리 개념을 접한다면 Redux가 굉장히 버겁게 느껴질 수도 있습니다.
- Recoil, MobX와는 달리 State가 변경 될 때 Component를 업데이트 해주는 반응형 메커니즘이 기본적으로 탑재되지 않았기에, React의 자체 메커니즘을 활용하거나 추가적인 외부 라이브러리를 사용해야 합니다.
2. Mobx
Mobx 역시도 Redux와 같이 리액트에서 사용할 수 있는 상태 관리 라이브러리이며, 클래스형 컴포넌트를 기준으로 만들어져 객체 지향 프로그래밍 방식으로 코드를 작성할 수 잇다. 이 때문에 Mobx와 리액트의 함수형 컴포넌트의 Hooks를 함께 사용하면 오류가 발생할 수 있다.
장점
- Recil과 마찬가지로 Redux에 비해 전체적으로 조금 더 쉬운 러닝커브를 갖고 있습니다. 또한 객체 지향적이고 캡슐화를 지원하기에 개발자가 친화적이라고 볼 수 있스빈다.
- Redux에서 제공하지 않는 반응형 메커니즘을 제공하기에 조금 더 쉽게 동적 웹앱 제작이 가능합니다.
단점
- 웹앱 규모가 커지면서 로직이 MobX의 자동 업데이트에 의존하기에 디버깅이 조금 더 어려워질 수 있습니다. Redux만큼 커뮤니티가 크지 않다는 것도 단점입니다.
3. Recoil
Recoil은 Redux, Mobx와는 다르게 React에서 제공하는 상태 관리 라이브러리이다. Redux와 Mobx는 React의 라이브러리가 아니기 때문에 React 내부 스케쥴러 접근이 어렵다. 리액트는 최근 동시성 모드를 제공하기 위해 실험중인데, Recoil은 리액트의 상태를 사용하기 때문에 해당 기능도 지원하는 것이 가능하다는 설명이 있다.
장점
- Recil은 Redux, MobX에 비해 더 간단한 구조를 갖고 있습니다. 따라서, 초심자가 시작하기에 적당하며, 작은 프로젝트를 시작하는 데 무지막지한 보일러 플레이트가 필요하지 않습니다.
- 개발 상으로도 많은 이점을 갖고 있는데, Recoil을 사용한다면 component가 렌더링 되는 시기, 상태 등을 세밀하게 제어할 수 있습니다. 이를 이용하여 성능 최적화 등에도 사용 가능합니다.
* 보일러 플레이트 : 웹 개발을 하다보면 의미없는 노등을 할 때가 있습니다. 직접 입력하지 않고 쉽게 생성합니다. 이런 단순한 노동을 없애주는 것을 말한다.
단점
- 세 개의 라이브러리 중 가장 최신의 라이브러리이다 보니, 사용자 커뮤티티가 비교적 빈약합니다. 이슈 혹은 버그가 생겼을 때, 홀로 해결해야 하는 경우가 생길 수도 있습니다.
- 시작하기는 쉽지만 Recoil의 상태관리 자체가 굉장히 세분화 되어 있기에 초심자가 디버깅하거나 테스트를 진행하기에 어려울 수도 있습니다.
정리하자면,
1. Recoil
- 간단하게 설정할 수 있으며, 컨포넌트 간에 상태를 공유하기 쉽습니다.
- 컴포넌트 내에서 Recoil hook을 사용하여 상태를 접근합니다.
2. Redux
- 많은 코드 작성이 필요하며, 액션 및 리듀서를 정의해야 합니다.
- 컴포넌트와 상태 간의 연결을 위해 'connect' 함수를 사용해야 합니다.
- 복잡한 애플리케이션의 상태 관리에 적합하며, 중앙 집중식 상태 저장소를 제공합니다.
3. MobX
- 데코레이터를 사용하여 간단하게 상태를 정의하고 관리합니다.
- 컴포넌트와 상태 간의 연결을 위해 'observer' 함수를 사용합니다.
- 상태 변경 시 자동으로 리렌더링됩니다.
- 단순한 애플리케이션 또는 작은 규모의 상태 관리에 적합합니다.