#TIL 40일차(Zustand)

---

Zustand란?

Zustand는 독일어로 "상태"를 의미하며 단순화된 Flux 패턴을 사용하는 작고(small) 빠르고(fast) 확장가능한(scalable) 상태관리 솔루션

→ Hooks에 기반으로하는 간편한 API가 존재

Zustand의 주요 개념

Zustand의 주요 개념에 대해 먼저 알아보자!!

Zustand의 주요 특징

• 간결함
  • 복잡한 설정이나 보일러플레이트 코드 없이 상태를 쉽게 정의하고 사용할 수 있는 매우 간단한 API를 제공함
    → 학습 곡선도 완만함
• 성능
  • 불필요한 리렌더링을 방지하는 등, 성능 최적화가 잘 되어 있음
  • Zustand는 상태가 변경될 때, 해당 상태를 구독하고 있는 컴포넌트만 리렌더링함
    → 리렌더링으로 인한 성능 저하를 방지할 수 있음
• React와 통합
  • React의 훅과 유사하게 상태를 선언적으로 관리할 수 있음
  • 기존 React 개발 경험을 그대로 활용할 수 있음
    → React의 useState, useEffect와 같은 기본 훅을 사용하는 것처럼 간편하게 사용할 수 있음

설치 및 기본 사용법

📍 Zustand 설치

yarn add zustand

📍 기본 사용법

// src > zustand > bearsStore.js
import { create } from "zustand";

const useBearsStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

export default useBearsStore;

// src > App.jsx
import "./App.css";
import useBearsStore from "./zustand/bearsStore";

function App() {
  const bears = useBearsStore((state) => state.bears);
  const increasePopulation = useBearsStore((state) => state.increasePopulation);
  return (
    <div>
      <h1>{bears} around here ...</h1>
      <button onClick={increasePopulation}>one up</button>
    </div>
  );
}
export default App;

Zustand와 RTK

위의 코드를 토대로 비교해보겠다.

설정 및 사용법 비교

📌 Zustand

• 매우 간단한 설정과 사용법을 제공해서 상태를 정의하고 사용하는 과정이 직관적임

📌 RTK

• 보다 구조화된 방법을 제공하지만, 설정이 다소 복잡할 수 있음
• 보일러 플레이트가 너-무 많다보니 상태 하나를 관리하고자 해도 추가/설정해야 하는 것이 상당함

장단점 비교

• Zustand
  • 장점: 간단하고 빠르며, 설정이 매우 쉬움
  • 단점: 상태가 커지면 관리가 어려울 수 있음
• RTK
  • 장점: 구조화된 방법을 통해 대규모 애플리케이션에서도 관리가 용이
  • 단점: 설정이 복잡하고, 학습 곡선이 가파름

Zustand의 장점과 단점

😊 장점

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

😵 단점

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

RTK와 비교

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