Zustand란 무엇인가?

상태관리가 왜 필요한가?

App
├── Header (로그인 유저 이름 표시)
├── Sidebar (장바구니 개수 표시)
└── MainContent
    └── ProductList
        └── ProductCard (장바구니 추가 버튼)

ProductCard에서 버튼을 누르면 -> Header와 Sidebar가 업데이트 되어야한다. 그런데 이 컴포넌트들은 서로 형제/부모/자식 관계가 복잡하다.

React 기본방식 (useState)으로는 공통 부모까지 state를 끌어올려야하고, props를 계속 내려줘야하는 props drilling 문제가 발생한다.

// props drilling
<App cart={cart} setCart={setCart}>
  <Header cart={cart} />
  <MainContent cart={cart} setCart={setCart}>
    <ProductList cart={cart} setCart={setCart}>
      <ProductCard cart={cart} setCart={setCart} />

이런 props drilling 문제를 해결하는게 상태관리 라이브러리이다.

Zustand의 핵심 개념 - Store

Zustand의 핵심은 Store입니다. Store는 앱 어디서든 접근할 수 있는 전역 데이터 창고입니다. 컴포넌트들이 Store를 구독(subscribe)하고 있다가, Store의 데이터가 바뀌면 자동으로 리렌더링됩니다.

Zustand의 동작 원리

Zustand는 내부적으로 Pub/Sub (발행 - 구독) 패턴으로 동작합니다.

컴포넌트가 Store를 구독 (subscribe)
사용자가 액션 실행 (ex: 버튼 클릭)
set() 함수로 state 변경
변경된 state를 구독 중인 컴포넌트에게 알림 (notify)
해당 컴포넌트만 리렌더링

Zustand의 3가지 핵심요소

create - Store를 만드는 함수

import {create} from 'zustand'
const useStore = create((set,get)=>({
    // 여기에 state와 action을 정의
}))

set - state를 변경하는 함수

// 방법1 : 직접 값 지정
set({count:5})
// 방법2 : 이전 state 기반으로 변경(권장)
set((state)=>({
    count:state.count+1
}))

get - action 안에서 현재 state 읽기

const useStore = create((set,get)=>({
    count:0,
    doubleCount: () =>{
        const current = get().count
        return current*2
    }
}))

Selector - 필요한 것만 구독

// count가 아닌 것이 바뀌어도 리렌더링
const store = useCounterStore()
// count만 구독 - count가 바뀔 때만 리렌더링
const count = useCounterStore((state)=>state.count)

정리

Store : 전역 데이터 창고, state + action을 한 곳에 create : Store를 만드는 함수 set : state를 변경하는 함수 get : 현재 state를 읽는 함수 (action 내부) Selector : 필요한 state만 골라서 구독하는 함수 subscribe : 컴포넌트가 store 변화를 감지하는 것