[KUIT] 8주차 워크북 보충 - 전역 상태 관리 라이브러리 정리

상태관리에 대한 접근 방식은 크게 3개로 나눌 수 있다.

• Flux (Redux, Zustand)
• Proxy (Mobx, Valtio)
• Atomic (Jotai, Recoil)

(출처: https://velog.io/@ggong/상태-관리를-위한-라이브러리-jotai)

 

---

1. FLUX 방식

(이미지 출처: https://velog.io/@alskt0419/FLUX-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90%EB%9E%80)

 

FLUX는 Facebook에서 개발한 애플리케이션 아키텍처

이 패턴은 클라이언트-사이드 웹 애플리케이션을 구축하는 데 사용되며, 특히 단일 페이지 애플리케이션에서 유용하다.

FLUX는 다음 네 가지 주요 구성 요소로 구성:

1. Dispatcher: 모든 데이터 흐름을 관리하는 중앙 허브
2. Stores: 애플리케이션의 상태와 로직을 포함
3. Actions: 사용자가 시스템에게 보내는 다양한 신호
4. Views: React 컴포넌트로, 상태가 변경될 때마다 다시 렌더링

FLUX의 핵심 개념은 "단방향 데이터 흐름"

→ 데이터가 시스템을 통해 한 방향으로만 이동하며, 이를 통해 애플리케이션의 동작을 예측 가능하게 만듬

→ 복잡한 대규모 애플리케이션에서 상태를 관리하는 데 도움

 

---

Redux

Redux는 JavaScript 애플리케이션의 상태를 관리하는 데 사용되는 라이브러리

Redux는 Flux 패턴에서 영감을 받아 개발되었으며, 애플리케이션의 전역 상태를 관리하는 데 도움

Store라는 하나의 저장고에 모든 state를 담아 state가 필요하다면 store에서 state를 꺼내서 값을 받아오는 방식

 

Redux의 구성 요소:

 

Store: 애플리케이션의 상태를 저장하는 곳 ->앱에서 필요한 상태를 담는 하나뿐인 데이터 공간

Actions: 상태를 변경하려는 의도를 나타내는 객체 ->액션은 자바스크립트 객체 형식으로 되어 있으며, 앱에서 스토어에 운반할 데이터

Reducers: 액션에 응답하여 상태를 변경하는 함수 -> 리듀서는 순수 함수로, 이전 상태와 액션을 받아 새로운 상태를 반환

 

이미지 출처: https://velog.io/@xhdckd12/리덕스Redux란

---

zustand

zustand는 클라이언트 상태 관리 라이브러리 중 하나로, 매우 쉬운 Flux 패턴을 따르는 도구

(Zustand라는 이름은 독일어로 '상태’를 뜻함)

 

Zustand의 주요 특징:

1. 간결성: 초기 설정 코드가 거의 없고, 로직이 직관적
2. 효율성: Context API처럼 Provider로 컴포넌트를 감싸지 않아, 상태 변경 시 불필요한 리렌더링이 일어나지 않음
3. 유연성: 아키텍처나 패턴을 강제하지 않는 매우 유연한 라이브러리

 

---

2. Proxy 방식

 

전체 상태(Proxy)들을 모아놓고 엑세스를 제공하며, 컴포넌트에서 사용되는 일부 상태를 자동으로 감지하고 업데이트를 인지하는 패턴

 

---

MobX

MobX는 프론트엔드를 위한 애플리케이션 상태 관리 라이브러리

 

MobX는 애플리케이션 전반에서 사용하는 상태(state, 자주 변경되어 관리되는 데이터)를 손쉽게 관리하여 변경에 대한 반응을 처리해줄 수 있는 라이브러리

 

MobX의 주요 개념:

 

Observable State (관찰 받고 있는 상태): MobX를 사용하고 있는 앱의 상태는 Observable -> 이 상태는 관찰 할 수 있는 상태로, 어떠한 변화가 일어나면 MobX가 이를 바로 탐지 가능

 

Computed Value (연산된 값): 연산된 값은 기존의 상태값과 다른 연산된 값에 기반하여 만들어질 수 있는 값

 

Reactions (반응): Reactions는 Computed Value와 비슷 -> Computed Value의 경우는 우리가 특정 값을 연산해야 될 때 에만 처리가 되는 반면에, Reactions은 값이 바뀜에 따라 해야 할 일을 정하는 것을 의미

 

Actions (액션; 행동): 액션은 상태에 변화를 일으키는 모든 것 -> MobX는 action으로 인해 발생하는 모든 애플리케이션 state 변화가 derivation과 reaction에 기반해 자동적으로 이루어졌는지 확인해 줌

---

Valtio

Valtio는 React를 위한 상태 관리 라이브러리로, JavaScript의 Proxy를 활용하여 상태를 관리

 

 

Valtio의 주요 특징:

 

Proxy-state: Valtio는 상태 객체를 Proxy로 감싸서 상태를 관리 ->이를 통해 상태 변경을 감지하고 필요한 컴포넌트를 자동으로 업데이트하는 것이 가능

 

Mutate from anywhere: Valtio에서는 상태를 어디서든 변경할 수 있음

 

React via useSnapshot: Valtio는 useSnapshot hook을 제공 -> 이 hook을 사용하면, 상태의 변경을 감지하고 해당 상태를 사용하는 컴포넌트를 재렌더링할 수 있음

 

Subscribe from anywhere: Valtio에서는 상태를 구독하고, 상태 변경을 감지하여 필요한 작업을 수행할 수 있음

 

Valtio는 React의 Suspense와 React 18과 호환되며, Vanilla JavaScript 애플리케이션에서도 사용 가능

---

3. Atomic 방식

상태를 작은 단위, 즉 '아톰’으로 관리하는 방식

각 아톰은 상태의 일부를 나타내며, 어떤 컴포넌트에서나 읽고 쓸 수 있다.

→ 아톰의 값이 변경되면 해당 아톰을 구독하는 모든 컴포넌트가 재렌더링

---

Recoil

이미지 출처: https://velog.io/@jiyaho/Recoil-React에서-Recoil-도입기

 

Recoil의 주요 구성 요소:

 

Atom: Recoil에서 하나의 전역 상태를 나타냄 -> Atom은 어떠한 컴포넌트에 묶여있지 않고, 모든 컴포넌트에서 접근 가능한 하나의 그래프라고 볼 수 있다.

 

Selector: 하나의 추출된 state를 나타냄. '추출된 (derived 또는 파생된)'이라는 의미는 state가 변경 (transformation)된 것을 의미

 

또한 Recoil은 동시성 모드를 지원

동시성 모드는 여러 개의 작업이 동시에 진행되는 것처럼 보이지만, 실제로는 각 작업이 작은 단위로 번갈아 가면서 실행되는 것

→ 이를 통해, Recoil은 상태 정의를 점진적이고 분산된 방식으로 처리할 수 있다.

→ 이는 코드 분할이 가능하게 하며, 상태를 사용하는 컴포넌트를 수정하지 않고도 상태를 파생된 데이터로 대체할 수 있다.

---

Jotai

recoil과 컨셉이 비슷

→ selector과 비슷하게 “파생된 atom”을 통해 computed 값을 생성

(Jotai는 일본어 狀態(상태) 를 그대로 발음 한 것)

(출처: https://medium.com/zigbang/react-상태-관리-도구-살펴보기-1b2e6a771cb9 )

---

자신한테 맞는 상태 관리 라이브러리를 찾고 싶다면

출처: https://x.com/dai_shi/status/1348257768130560008

 

위 그림을 참고해보자!!!