[React] 전역 상태관리 라이브러리 장단점 비교 정리

React로 개발을 진행하다보면 Component의 상태관리를 하게된다.

그런데 해당과정에서 컴포넌트의 Depth가 깊어질수록 반복적인 코드작성이 많아지고 그 횟수가 1000번이라고 생각하면 시간도 어마어마하게 걸릴것이다.

 

이와 같은 경우 전역적으로 상태를 관리해주는 라이브러리를 사용해서 해결할 수 있으며 종류마다 장단점이 있다.

 

Redux

상태관리를 위해 사용하는 자바스크립트 라이브러리이다.

리액트에서만 사용할 수 있는 라이브러리가 아닌 독립적으로 분류되어있는 라이브러리이기 때문에

리액트 뿐 아닌 Vue나 앵귤러 등에서도 사용이 가능하다.

 

Redux는 가장 많이 사용되는 전역 상태 관리 라이브러리 중 하나이며, 컴포넌트 간의 상태를 트리 구조로 관리하며, 액션(Action)과 리듀서(Reducer)를 통해 상태를 업데이트한다.

 

장점

• 상태의 변화를 예측 가능한 방식으로 처리하기 때문에 디버깅이 용이하다.
• 상태가 중앙에서 관리되므로, 컴포넌트 간의 상태 전달이 쉽고 예측이 가능하다.
• 미들웨어(Middleware)를 사용하여 비동기 작업을 처리할 수 있다.

단점

• Redux는 많은 코드를 필요로 하며, 처음 학습하는데 러닝커브가 오래걸린다.
• 규모가 큰 프로젝트에서 사용하면 좋지만 작은 규모라면 굳이 Redux를 사용할 필요가 없다.

 

---

 

MobX

MobX는 Redux와 마찬가지로 전역 상태 관리를 위한 라이브러리 중 하나이다.

MobX는 상태 변화를 자동으로 감지하여 상태를 업데이트하며, 컴포넌트에서는 'observer' 데코레이터를 통해 상태를 구독할 수 있다.

 

장점

• 객체지향적 -> MobX는 객체지향적으로 class를 사용을 권장한다.
• 캡슐화 -> state의 변경을 오직 메서드를 통해서만 변경할 수 있게 설정이 가능하다.
• 코드가 간결하며, Redux와 달리 작은 규모의 애플리케이션에서 사용하기 쉽다.
• 컴포넌트에서 상태를 직접 관찰할 수 있어, 불필요한 리렌더링을 방지할 수 있다.

단점

• Redux에 비해 다른 개발자들과의 협업이 어려울 수 있다.
• 디버깅이 불편하다 -> Redux와 같은 툴이 없어 디버깅을 위해선 console.log를 이용해야 한다.
• 레퍼런스 코드가 부족하다.

 

---

 

Recoil

Recoil은 페이스북에서 만든 리액트 전역 상태 관리 라이브러리이다.

Recoil은 상태를 'atom'과 'selector'로 구성하며, 'atom'은 상태를 정의하고, 'selector'는 'atom'을 기반으로 파생된 값을 정의한다.

 

장점

• 컴포넌트에서 필요한 상태만 구독하도록 할 수 있어, 성능이 우수하다.
• 코드가 간결하며, Redux와 같은 불필요한 코드를 작성할 필요가 없다. (간단한 인터페이스) ->  get/set 등

단점

• Recoil은 Redux와 달리 상대적으로 새로운 라이브러리이기 때문에 레퍼런스 자료가 부족하다.
• 대규모 애플리케이션에서는 상태를 관리하기 어려울 수 있다.
• Recoil 빌드는 ES5로 트랜스파일 되지 않아, Recoil을 ES5와 사용하는 것은 지원하지 않는다 -> 호환성이 좋지 않음

 

---

 

Context API

Context API는 리액트에서 제공하는 전역 상태 관리 라이브러리이다. (최근에 나옴)

 

장점

• 접근성 -> React에서 제공하는 기술이라 추가 설치가 필요없다.
• Redux나 MobX에 비해 러닝커브가 낮다 (쉽게 사용 가능)
• 사용하기 위한 코드 구성이 매우 간결하다.

단점

• Context의 Provider는 value값이 변할 경우 해당 값을 사용하는 컴포넌트 또한 리렌더링된다. 컨텍스트를 상태값과 액션값으로 나누어 사용하면 해결이 가능하지만 보일러 플레이트 코드(Boilerplate code)가 증가하며 복잡해질수록 Provider가 늘어나 지옥을 맛볼 수 있다.

 

 

 

✏️Reference

https://dalaranl.github.io/react/redux-mobx-context/

상태관리 라이브러리의 장단점 정리