🌈 상태 관리 라이브러리

https://chaereemee.tistory.com/13

❓ JWT 토큰 클라이언트에 저장 (해결 완료)

 

당황스럽다

상태 관리 라이브러리 그냥 Redux 쓰면 되는거 아니야? 하는 사람도 있을 것이다.

찾아볼수록 현재 사용되는 상태 관리 라이브러리들이 너무 많다. React 상태 관리 라이브러리 춘추전국시대라는 말도 있다 ㅋㅋㅋㅋ

Redux, Recoil, Context API, Zustand, Jotai, MobX, Valtio, React Query 등등등등

나는 그럼 뭐쓰라고,,,,,,,,,,,,?

 

npm trends로 보면 redux가 압도적인 걸 확인할 수 있다.

현업에서 4년 정도 이미 리덕스가 자리를 잡고 있고, 기존에 있는 것들을 따라가는 게 아닐까 생각한다.

그러면 나도 그냥 따라서 Redux를 사용하면 되자나? 할 수도 있지만 

여러 라이브러리들의 특징과 차이점을 정리해보며, 내 프로젝트에는 어떤 라이브러리가 적합할 지 고민해보자!

 

Why

먼저 상태관리 라이브러리를 왜 쓰는가!!

다른 페이지 혹은 다른 컴포넌트와 상태를 공유하기 위해서 사용한다. 
React에서 상태는 단방향으로만 흐르기 때문에 다른 컴포넌트 혹은 페이지와 상태를 공유하기 위해선
상태를 상위 컴포넌트로 끌어올리고 하위 컴포넌트로 내려주는 형태로 사용해야 한다.
이 과정에서 끝도 없이 상태를 내려줘야 하는 Props Drilling 현상이 발생하게 되고
이렇게 되면 유지보수에도 큰 악역향을 미치게 된다.
이런 상황을 피하기 위해 상태 관리 라이브러리를 사용해야 한다.

 

비교

1. Redux

가장 널리 사용되는 상태 관리 라이브러리 중 하나로, 전역 상태를 중앙에서 관리한다.
actions, reducers, store 등의 개념을 사용하여 상태를 관리하며, 매우 체계적이고 확장성이 뛰어나다.
Flux 패턴을 기반으로 동작하는 전역 상태 라이브러리이다.

장점

- 큰 애플리케이션에서 상태를 관리하기에 적합하다.

- 미들웨어를 통해 비동기 작업을 쉽게 처리할 수 있다.

- 개발자 도구를 통해 상태 변화 추적이 용이하다.

단점

- 설정과 사용법이 다른 라이브러리에 비해 다소 복잡할 수 있다. (러닝커브가 높다)

- 소규모 애플리케이션에는 오버헤드가 될 수 있다.

 

2. Recoil

Facebook에서 개발한 상태 관리 라이브러리로, React의 기본 상태 관리 기능을 확장하는 방식으로 동작한다.
atoms(상태의 단위)와 selectors(파생된 상태)를 사용하여 매우 간단하고 직관적으로 상태를 관리할 수 있다.

장점

- React와 자연스럽게 통합되며, 사용법이 매우 직관적이다.

- 비동기 상태 관리도 쉽게 처리할 수 있다.

- 가볍고 설정이 간편하다.

단점

- Redux보다 커뮤니티가 상대적으로 작다.

- 매우 큰 애플리케이션은 아직 한계가 있을 수 있다.

 

3. Zustand

비교적 가볍고 사용하기 쉬운 상태 관리 라이브러리이다.
Redux와 비슷한 기능을 제공하지만, 설정이 훨씬 간편하다.

장점

- 가볍고 간단하며 사용이 매우 직관적이다.

- 작은 설정으로도 강력한 상태 관리를 할수 있다.

- React와의 호환성이 뛰어나며, 비동기 작업도 간편하게 처리할 수 있다.

단점

- 대규모 애플리케이션에서는 아직 사용 사례가 적다.

- 커뮤니티가 비교적 작다.

 

4. Jotai

React를 위한 원자(atom) 기반 상태 관리 라이브러리이다.
단순함과 가벼움을 추구하며, 상태를 원자 단위로 관리해 복잡성을 줄인다.

장점

- 상태 관리가 매우 간단하며, 선언적이다.

- React 훅과 완벽한 호환성이다.

-  필요한 부분에서만 상태를 구독해 성능을 최적화한다.

단점

- 규모가 큰 애플리케이션에서는 기능이 부족할 수 있다.

- 상대적으로 커뮤니티가 작다.

 

전체적으로 봤을 때 작은 프로젝트나 단순한 상태 관리는 Zustand, Jotai를 사용하고, 규모가 있는 프로젝트이거나 복잡한 상태 관리는 Redux를 사용하는 것 같다.

 

나의 선택은 Zustand!!!!!

이유

- Redux는 많은 보일러플레이트 코드와 복잡한 설정이 필요한 반면,

   Zustand는 설정이 거의 필요하지 않고, 이런 간결함 덕분에 소규모 프로젝트에서 신속한 개발이 가능하다.

- Redux는 러닝 커브가 높아서 비교적 Zustand가 이해하고 빠르게 익힐 수 있다.

- 불필요한 오버헤드 없이 경량으로 상태 관리를 할 수 있다.

 

https://chaereemee.tistory.com/15

🌈 Zustand