- Published on
프론트엔드에서 상태 관리에 대한 3가지 접근 방식 - Flux, Proxy, Atomic
- Authors
- Name
- Inhwan Cho
애플리케이션의 상태를 효율적으로 관리하는 것은 사용자 인터페이스의 일관성을 유지하고, 데이터 흐름을 예측 가능하게 만들어 줍니다.
여기서는 상태 관리의 세 가지 접근 방식인 Flux, Proxy, Atomic에 대해 비교하고 예시를 들어 설명하겠습니다.
Flux
Flux는 Facebook에 의해 소개된 애플리케이션 아키텍처로, 주로 React와 함께 사용됩니다.
Flux의 핵심 아이디어는 "단방향 데이터 흐름"입니다.
이는 애플리케이션 내에서 데이터가 어디서 어떻게 변경되는지를 더 예측 가능하게 만들어 줍니다.
구성요소: Dispatcher, Stores, Views (React Components), Actions
단방향 데이터 흐름: Action -> Dispatcher -> Store -> View
Proxy
Proxy 방식은 JavaScript의 Proxy 객체를 활용하여 객체의 속성에 대한 접근, 할당, 삭제 등을 가로채고 추가적인 로직을 수행하는 방식입니다.
이를 통해 상태 객체를 직접 관찰하고 변경 사항을 자동으로 감지할 수 있습니다.
- 자동 상태 변경 감지: 상태 객체에 대한 변경을 실시간으로 감지하고 반응합니다.
Atomic
Atomic 상태 관리는 상태를 불변의 작은 단위로 관리하는 방식입니다.
각 상태는 독립적인 "원자(atom)"로 취급되며, 상태 변경은 항상 새로운 원자를 생성함으로써 이루어집니다.
이 접근법은 상태 변경의 추적과 시간 여행 디버깅을 용이하게 합니다.
불변성: 상태는 변경되지 않고, 변경이 필요한 경우 새로운 상태가 생성됩니다.
재사용성: 작은 단위의 상태는 재사용될 수 있으며, 조합하여 더 큰 상태를 만들 수 있습니다.
표를 통해 한 눈에 분석해보기
| 특성/접근 방식 | Flux | Proxy | Atomic |
|---|---|---|---|
| 개념 | 단방향 데이터 흐름을 통한 상태 관리 | 객체의 속성 접근 및 변경을 가로채는 방식을 통한 상태 관리 | 원자적 상태 단위를 통한 불변성 기반 상태 관리 |
| 주요 구성 요소 | Dispatcher, Stores, Actions, Views | Proxy 객체 | Atoms, Selectors (Recoil의 경우) |
| 데이터 흐름 | 단방향 (Action -> Dispatcher -> Store -> View) | 양방향 (상태 변경 시 자동 감지 및 반응) | 데이터 흐름이 없으며, 상태는 불변하고 필요 시 새로 생성됨 |
| 장점 | 데이터 흐름의 예측 가능성, 큰 규모의 앱에서의 구조화 | 상태 변경의 자동 감지, 직관적인 반응형 프로그래밍 | 상태의 불변성, 상태 재사용 및 조합의 용이성 |
| 단점 | 복잡한 설정과 보일러플레이트 코드 | Proxy 기반의 미묘한 부작용 가능성 | 상태 관리의 구조와 개념 학습 필요 |
| 적합한 사용 사례 | 큰 규모의 애플리케이션, 복잡한 데이터 흐름을 가진 앱 | 중소 규모의 반응형 애플리케이션, 즉각적인 상태 반영이 필요한 앱 | 상태의 불변성을 중시하는 애플리케이션, 상태 재사용 및 조합이 필요한 앱 |
| 주요 라이브러리 | Redux, Zustand | Mobx, Valtio | Recoil, Jotai |
그 중 Flux의 데이터 흐름에 대해서 자세하게 알아보겠습니다.
Action
- 정의: Action은 일어난 이벤트를 설명하는 자바스크립트 객체입니다. 사용자의 인터랙션 또는 서버로부터의 데이터 업데이트 같은 이벤트에 대한 정보를 담고 있습니다.
- 역할: Action 객체는 일반적으로 type 필드를 포함하여, 어떤 종류의 액션이 일어났는지를 식별합니다. 또한, 이벤트와 관련된 추가 데이터를 전달할 수 있습니다.
- 예시:
{ type: 'ADD_TODO', text: 'Learn Flux' }
Dispatcher
- 정의: Dispatcher는 애플리케이션의 모든 데이터 흐름을 관리하는 중앙 허브입니다.
- 역할: 모든 Action은 Dispatcher를 통해 전송되며, Dispatcher는 등록된 콜백 함수를 사용하여 해당 Action을 Store에 전달합니다. 이 과정은 애플리케이션 내에서 일관된 데이터 흐름을 보장합니다.
- 작동 방식: Store는 자신을 Dispatcher에 등록하여, Action이 발생할 때마다 알림을 받을 수 있습니다. Dispatcher는 Action을 받으면 등록된 모든 Store에 이를 전달합니다.
Store
- 정의: Store는 애플리케이션의 상태(데이터)와 로직을 보관합니다.
- 역할: Store는 애플리케이션의 상태를 관리하고, Dispatcher로부터 Action을 받아 상태를 업데이트합니다. Store는 변경 사항이 있을 때마다 View에 알림을 보내 UI를 업데이트할 수 있도록 합니다.
- 특징: Store는 일반적으로 도메인별로 나뉘며, 각각의 Store는 독립적으로 자신의 상태를 관리합니다.
View
- 정의: View는 사용자에게 보여지는 UI 부분입니다. React에서는 컴포넌트가 View의 역할을 합니다.
- 역할: View는 Store로부터 상태를 가져와 사용자에게 표시합니다. 사용자의 인터랙션은 View에서 Action을 생성하여 Dispatcher로 전달하는 과정을 통해 시작됩니다.
- 상호작용: 사용자의 Action이 Store의 상태 변경을 유발하고, 이 변경 사항은 다시 View를 업데이트하게 만듭니다. 이 과정은 데이터의 단방향 흐름을 이루며, 애플리케이션의 예측 가능성과 유지보수성을 높입니다.