Zustand

zustand 설치 yarn add zustand

 

 

zustand 등장배경

 

(1) 상태관리의 중요성

상태관리는 모든 리액트 애플리케이션에서 매우 중요합니다. 작은 규모의 애플리케이션에서는 상태관리가 간단하지만, 애플리케이션이 커질수록 상태관리는 점점 더 복잡해집니다.

 

(2) Zustand의 필요성

기존의 상태관리 라이브러리인 Redux는 제공하는 기능과 연계된 미들웨어 등 매우 강력한 퍼포먼스를 자랑하지만, 설정과 사용법이 복잡했죠! Zustand는 상태관리 본연의 기능에 집중하여 위와 같은 복잡성을 줄이고, 보다 간단하고 직관적인 상태관리 기능을 제공해요.

zustand 의 주요개념

• 간결함
  • 매우 간단한 API를 제공하기 때문에, 학습 곡선이 완만해요.
  • 매우 적은 설정 코드 및 적용 코드를 이용하여 상태관리 기능을 구현할 수 있어요.

• 성능
  • 불필요한 리렌더링을 방지하는 등, 성능 최적화가 잘 되어 있습니다.
  • 상태의 일부가 변경되었을 때 그 상태를 사용하는 컴포넌트만 업데이트되므로, 애플리케이션 전체가 리렌더링되지 않아요! 이를 통해 성능을 최적화하고, 리렌더링으로 인한 성능 저하를 방지할 수 있습니다.

 Zustand와 Redux Toolkit 비교

 

Zustand

• 장점: 간단하고 빠르며, 설정이 매우 쉽습니다.
• 단점: 상태가 커지면 관리가 어려울 수 있습니다.

Redux Toolkit

• 장점: 구조화된 방법을 통해 대규모 애플리케이션에서도 관리가 용이합니다.
• 단점: 설정이 복잡하고, 학습 곡선이 가파릅니다.

 Zustand의 장점과 단점

(1) 장점

• 간편한 사용: 간단한 API와 직관적인 사용법을 제공합니다.
• 성능 최적화: 불필요한 리렌더링을 방지합니다.
• React와의 완벽한 통합: React의 훅과 잘 통합되어 있습니다.
• 미들웨어 지원: 로깅, 퍼시스턴스 등 다양한 미들웨어를 사용할 수 있습니다.
• 유연성: 필요한 부분만 선택적으로 사용할 수 있습니다.
• 커뮤니티와 자료: 예전엔 다른 대형 라이브러리에 비해 상대적으로 커뮤니티와 자료가 부족할 수 있었지만 꾸준한 인기 급(?)상승으로 많은 자료가 확보되고 있어요 

(2) 단점

• 상태가 커지면 관리 어려움: 상태가 많아지면 관리가 복잡해질 수 있습니다.

(3) Redux Toolkit과의 비교

• 설정과 사용법: Zustand는 설정과 사용이 간단하며, Redux Toolkit은 더 구조화된 방법을 제공합니다.
• 성능: 두 라이브러리 모두 성능 최적화가 잘 되어 있지만, Zustand는 불필요한 리렌더링을 방지하는 데 더 초점을 맞춥니다.
• 유연성: Zustand는 필요한 부분만 선택적으로 사용할 수 있지만, Redux Toolkit은 보다 강력한 구조화된 방법을 제공합니다.
• 커뮤니티와 자료: Redux Toolkit은 대형 커뮤니티와 풍부한 자료를 가지고 있으며, Zustand는 상대적으로 부족할 수 있지만 현재는 많은 인기에 힘입어 늘어나고 있습니다.