Zustand 소개 및 기본 사용법 - Zustand 기초부터 아키텍쳐 설계까지 1편

Introduction to Zustand and Basic Usage - From Basics to Architecture Part 1

Prop drilling

• 아주 간단하다
  Redux처럼 복잡한 설정이나 보일러플레이트가 거의 없습니다. 몇 줄의 코드로 바로 스토어를 만들고 사용할 수 있습니다.
• Provider가 필요 없다
  Context API와 달리, 앱 전체를 Provider 컴포넌트로 감쌀 필요가 없습니다. 이는 코드를 더 깔끔하게 유지해 줍니다.
• 훅(Hook) 기반으로 동작한다
  useState를 사용하듯, 훅을 호출하여 스토어의 상태와 상태 변경 함수를 가져옵니다. 매우 직관적입니다.
• 리렌더링 최적화
  상태의 특정 부분만 구독하여, 불필요한 리렌더링을 자동으로 방지해 줍니다.

npm install zustand

import { create } from 'zustand'
 
const useCounterStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}))
 
export default useCounterStore

• create 함수를 zustand에서 가져옵니다.
• create 함수 안에 설정 함수를 전달합니다. 이 함수의 set 매개변수는 상태를 업데이트하는 함수입니다.
• 스토어 안에는 count라는 숫자형 상태와, 이 count를 변경하는 increase, decrease, reset 함수를 정의했습니다.
• set 함수를 호출할 때, 현재 상태(state)를 받아와 새로운 상태 객체를 반환하는 방식으로 상태를 안전하게 업데이트합니다.

import React from 'react'
import useCounterStore from './store'
 
function Counter() {
  const { count, increase, decrease, reset } = useCounterStore()
 
  return (
    <div>
      <h1>카운터</h1>
      <p>{count}</p>
      <button onClick={increase}>+1</button>
      <button onClick={decrease}>-1</button>
      <button onClick={reset}>리셋</button>
    </div>
  )
}
 
export default Counter

• 방금 만든 useCounterStore 훅을 컴포넌트로 가져옵니다.
• useCounterStore()를 호출하면 스토어에 정의된 모든 상태와 함수를 객체 형태로 꺼내 쓸 수 있습니다.
• 마치 useState를 사용하는 것처럼, count 값을 화면에 보여주고 각 버튼의 onClick 이벤트에 increase, decrease 함수를 연결했습니다.

• 지역 상태 (Local State)
  • 특정 컴포넌트 안에서만 사용되고, 다른 컴포넌트와 공유할 필요가 없는 상태입니다.
  • 예: 입력 폼의 입력값, 모달 창의 열림/닫힘 여부 등.
  • 리액트의 기본 훅인 useState나 useReducer로 관리하는 것이 가장 좋습니다.
• 전역 상태 (Global State)
  • 여러 컴포넌트가 함께 공유하고 접근해야 하는 상태입니다.
  • 예: 로그인한 사용자 정보, 다크 모드와 같은 테마 설정, 장바구니 목록 등.
  • 바로 이럴 때 Zustand와 같은 상태 관리 라이브러리를 사용합니다.

다음 편에서는 Zustand의 핵심 개념인 selector와 shallow, 그리고 스토어를 다루는 다양한 함수들에 대해 더 깊이 파고들어 보겠습니다.

• Zustand 공식 문서↗