[기술면접] 3. 전역상태관리 라이브러리의 비교

상태관리 라이브러리 종류

• Redux

현재 가장 많이 사용되는 전역상태관리 라이브러리

단방향의 구조를 이루고 있으며 사용자의 action이 dispatch 함수를 통해서 Dispatcher에 전달이 되고 이는 reducer를 통해서 CRUD(?) 되어 Store에 저장이 된다. 이후 selector를 통해서 View에 나타낼 수 있으며 View에서 사용자의 action에 의해서 순환되는 구조를 가진다

 

▣ 기타 특징

1. Store에 모든 상태를 저장하는 중앙집중 방식
2. 불변성을 유지하면서 상태변화를 관리해야 함
3. 보일러플레이트 코드가 크다 (단점)
4. 비동기 처리 시 saga , thunk 와 같은 별도의 라이브러리 필요 (단점)
5. 오직 하나의 Strore만 가지며, 하나의 객체 트리를 사용해 디버깅 용이 (장점)
6. 오직 action에 의해서만 Store 내부에 접근 가능(state 변경 가능) 

 

• MobX

Store가 여러개가 될 수 있기에 유지보수 반면에서 분리가 용이할 수 있으나 상태변경 시 다수의 Store에 영향을 받을 수 있으며, action의 발행 없이도 Store를 업데이트 할 수 있어 호불호가 갈릴 것 같음 Store의 관리측면에서나 예측가능성에서나 조금은 부족한 면이 있는 것 같음 하지만 보일러플레이트 코드가 적기에 Redux보다 접근이 쉬울 것 같다

 

• Context API

리액트가 가지고 있는 내부라이브러리 별도의 import 과정이 필요하지 않음

정적인 데이터 위주로 처리하거나 업데이트가 적다면 효율적으로 사용 가능

Provider로 감싸진 부분의 업데이트가 되지 않은 state에도 리랜더링이 발생하기 때문에 복잡한 업데이트 처리에는 적합하지 않음

 

• Recoil

최근 페이스북에서 나온 라이브러리 (React개발도 페이스북이 함)

Atom 과 Selector로 이루어져 있음, Atom은 상태의 단위로 유니크한 키값임(중복 x redux의 reducer의 이름이랑 비슷하다 생각) 구독의 개념을 생각해야함 해당 Atom을 구독하고 있는 컴포넌트들만 Atom의 변화에 따라 선택적 리랜더링을 하게 됨 Selector를 통해서 상태변화를 일으키며 비동기처리, 데이터 캐싱 기능도 제공

 

▣ 기타 특징

1. 보일러 플레이트가 적음
2. 코드 스플리팅이 가능함