프론트엔드 개발을 진행하며 상태 관리 도구들을 사용하는데
- 보일러 플레이트가 적다.
- 러닝 커브가 낮다.
같이 상태 관리 도구들의 차이 보단, 개인적인 난이도를 우선으로 고려해 선택했는데, 이번 기회에 어떤 차이가 있는지 공부해 보았습니다.
상태 관리 패턴
애플리케이션의 상태를 효율적으로 관리하는 것은 사용자 인터페이스의 일관성을 유지하고, 데이터 흐름을 예측 가능하게 만들어 줍니다.
여기서는 상태 관리의 패턴인 Flux, Atomic 패턴에 대해 공부해 보았습니다.
Flux
Flux Facebook에 의해 소개된 애플리케이션 아키텍처로, 주로 React와 함께 사용됩니다.
Flux의 핵심 아이디어는 "단방향 데이터 흐름"입니다.
이는 애플리케이션 내에서 데이터가 어디서 어떻게 변경되는지를 더 예측 가능하게 만들어 줍니다.
Flux 패턴은 사용자 입력을 기반으로 Action을 생성 -> Dispatch에 전달 -> 데이터가 모여있는 Store의 데이터를 변경하게 된다. 그 후 실제 렌더링(View) 에 반영되는 단방향의 흐름의 특성을 띄는 것이 특징입니다.
- Action - 데이터 흐름의 변화를 유발하는 동작
- Dispatcher - Action이 발생했음을 Store에 전달하는 역할
- Store - 데이터를 저장하는 공간
- View - Store에서 데이터를 가져와 사용자에게 보여주는 부분
Flux의 장점
1. 단방향 데이터 흐름으로 인해 상태 변경이 예측 가능함
2. 모듈화된 구조로 인해 유지보수가 용이
3. 대규모 애플리케이션에 적합한 확장성 제공
Flux의 단점
1. 상태 변경을 위해 Action → Dispatcher → Store 과정을 거쳐야 하므로 복잡성이 증가
2. 보일러플레이트 코드가 많아져 코드량이 증가함
Atomic
Atomic 상태 관리는 상태를 불변의 작은 단위로 관리하는 방식입니다.
각 상태는 독립적인 "원자(atom)"로 취급되며, 상태 변경은 항상 새로운 원자를 생성함으로써 이루어집니다.
이 접근법은 상태 변경의 추적과 시간 여행 디버깅을 용이하게 합니다.
[Recoil 공식 문서 출처].
상태를 작고 독립적인 단위(atom)으로 관리되며 사용되는 컴포넌트 마다 해당 원소만 불려저서 따로 읽고 쓰기가 가능합니다. Flux 패턴은 Store를 통해 관련있는 데이터를 Dispatcher로 관리한다면, Atomic 패턴은 각 데이터를 원소로 사용하여 해당 컴포넌트에서 원소를 관리합니다.
- Atom - 상태를 저장하는 최소 단위이며, 컴포넌트가 직접 구독 가능
- Selector - 여러 Atom을 조합하거나 변형하여 새로운 상태를 만들 수 있음
Atomic의 장점
1. 독립적인 상태 관리로 인해 특정 상태만 변경될 수 있어 성능 최적화에 유리함
2. 모듈화가 잘 되어 있어 코드 관리가 쉬움
3. 필요할 때만 상태를 읽고 변경할 수 있어 유연성이 높음
Atomic의 단점
1. 상태가 분산되므로 구조가 복잡해질 수 있음
2. 여러 Atom을 조합하여 사용할 경우 디버깅이 어려울 수 있음
Flux와 Atomic 패턴의 차이점
| 비교 항목 | Flux 패턴 | Atomic 패턴 |
|---|---|---|
| 데이터 흐름 | 단방향 (Action → Store → View) | 원자별 독립적 관리 |
| 상태 저장 방식 | 중앙 집중형 Store | 개별적인 작은 상태(Atom) |
| 변경 방식 | Dispatcher를 통해 상태 변경 | 컴포넌트에서 직접 Atom 상태 변경 |
| 장점 | 예측 가능한 데이터 흐름, 확장성 | 독립적인 상태 관리, 성능 최적화 |
| 단점 | 보일러플레이트 코드 많음, 복잡성 증가 | 상태가 분산되어 구조가 복잡할 수 있음 |
| 라이브러리 | Redux, Zustand | Jotai, Recoil |
요약
Flux 패턴은 단방향 데이터 흐름을 기반으로 하며, Action → Dispatcher → Store → View의 구조를 가집니다. 이를 통해 상태 변경을 예측 가능하게 하지만, 보일러플레이트 코드가 많고 복잡성이 증가하는 단점이 있습니다.
Atomic 패턴은 상태를 작은 단위(Atom)로 관리하여 독립성과 모듈화를 강화합니다. 필요한 컴포넌트만 특정 상태를 구독할 수 있어 성능 최적화가 용이하지만, 구조가 복잡해지고 디버깅이 어려울 수 있는 단점이 있습니다.
