[TIL] Redux와 Recoil 비교

Redux vs Recoil

Redux와 Recoil는 React의 상태관리 라이브러리이다.

• redux는 Flux 아키텍쳐 기반
• recoil은 Atomic 모델 기반

각각의 특성과 차이점을 비교해본다.

 

Redux

Flux 아키텍쳐 기반 라이브러리로, 데이터 흐름은 단방향이다.

• Action: action(type, payload)을 생성하여 이를 dispatcher에게 전달
• Dispatch: 모든 action을 전달받아 store에 전달
• Store: state를 가지고 있고 state를 변경 (state 변경 시 change 이벤트가 발생하면서 view에게 state가 변경되었다는 것을 알려줌)

redux는 중앙집중식으로 상태관리가 이루어진다.

 

Recoil

Recoil은 페이스북에서 만든 Context API 기반으로 구현된 함수형 컴포넌트에서만 사용가능한 상태관리 라이브러리이다.

Atom이라는 상태 단위로 상태를 관리하며, 컴포넌트는 이 atom을 구독하기만 하면 된다.

• 저장소 개념보다는 작은 상태 단위(atom)로 관리
• redux와 비교했을 때 shallow learning curve를 가짐
• 상태 변경으로 인한 불필요한 렌더링이 발생하지 않음(상태를 구독한 컴포넌트만 re-rendering 발생)
• 캐싱 지원: selector를 통해 캐싱