React는 단방향 데이터 바인딩으로 인하여 Props Drilling
이 문제가 되었습니다.
그 결과 전역적 상태 관리의 필요성
이 대두되어 상태관리 라이브러리가 등장하였습니다.
리액트는 다양한 상태관리 라이브러리를 가지고 있으며,
상태관리에 대한 접근 방식은 대표적으로 3가지가 있습니다.
다음 3가지 접근 방식의 특징을 알아 보겠습니다.
Flux(Redux, Zustand)
Atomic(Recoil,Jotai)
Proxy(Mobx,Valtio)
1. Flux Architecture
Flux아키텍처는 Action → Dispatcher → Store → View의 단방향 전역 상태 흐름을 가집니다.
1. Action
은 Action을 생성(type,payload)하고 Dispatcher에 전달
2. Dispatcher
는 모든 Action을 받아 Store에 전달
3. Store
은 State를 가지고 State를 변경
4. Store
에서 State가 변경될 때 Change이벤트 발생
=> View에서 State 업데이트(리렌더링
)
대규모 애플리케이션 또는 복잡한 상태 관리가 필요한 경우에 추천됩니다
2. Atomic Architecture (Recoil)
1. Atomic Architecture
는 객체를 Atom단위로 상태를 관리하고,
사용하고자 하는 컴포넌트는 이용 한다. 이것을 구독
이라고 합니다
2. 상태를 구독한 컴포넌트에서만 리렌더링이 발생 => 불필요한 리렌더링
이 발생하지 않습니다
3. selectors
(순수 함수)라는 것을 거쳐 React 컴포넌트로 내려갑니다
4. 상향식(bottom-up)
으로 수집 및 공유하는 것이 큰 특징입니다
3. Proxy Architecture
클래스형 컴포넌트 기반 애플리케이션을 유지하면서 상태 관리를 추가하고자 할 때 추천됩니다.