[React] 리액트의 상태관리 - Flux 패턴, Redux, context API

Flux 패턴 & 단방향 데이터 흐름

: 리액트는 단방향 데이터 흐름(Action → Dispatch → Reducer → Store)을 기반으로 하는 Flux 패턴을 사용

 

• Action: 상태 변경을 트리거하는 객체
• Dispatch: Action 객체를 Store에 전달하는 함수
• Reducer: Action에 따라 상태를 업데이트하는 함수
• Store: 애플리케이션의 전역 상태를 관리하는 객체
• View: Dispatch된 Action을 통해 상태를 변경하고, 상태가 변경되면 UI가 자동으로 업데이트됨

 

Redux

: Flux 패턴을 구현한 라이브러리로, 애플리케이션의 상태를 단방향 데이터 흐름으로 관리

 

[장점]

- 컴포넌트끼리 상태를 공유할 때 여러 컴포넌트를 거치지 않고 전달할 수 있어 효율적

- 상태 변경이 예측 가능하고 추적 가능

 

[단점]

- 상태가 변경될 때마다 Store와 연결된 모든 컴포넌트가 다시 렌더링되는 경향

- 상태가 많아질수록 관리가 복잡해지고 최적화가 상대적으로 어려워짐

 

Context API

: 컴포넌트 계층 구조를 따라 상태를 전달하는 방법

- 상태를 계층적으로 전파, Context를 통해 하위 컴포넌트로 전달함

 

[장점]

- 단일 context를 사용하여 특정한 데이터를 전파하고, 해당 context를 사용하는 컴포넌트들만 렌더링

- 불필요한 상태 업데이트나 재렌더링을 최소화할 수 있으며, 특정 context만 갱신하기 때문에 최적화가 상대적으로 용이

 

[단점]

- 상태 변경 시 모든 하위 컴포넌트를 다시 렌더링함

=> 대규모 애플리케이션에서 성능 문제가 발생할 수 있음

=> useMemo와 useCallback 사용을 통한 불필요한 렌더링을 방지하는 최적화가 중요!! 

 

 

 

reference

https://haruair.github.io/flux/docs/overview.html