1. Zustand

이 문서는 Zustand를 소개하고 간단한 예제 코드를 통해 기본적인 사용법을 설명하고 있습니다.

---

Zustand

Zustand는 간단하고 빠르며 확장성 있는 상태관리 솔루션입니다. hook를 기반으로 한 편리한 API를 가지고 있어서, 보일러플레이트 코드가 없습니다.

특히 Zustand를 사용하면 기존 React 동시성, 그리고 혼합랜더러 같은 곳에서 나타나는 컨텍스트 손실 같은 일반적인 문제들을 개선하는데 도움이 많이 됩니다.

그리 어렵지않으니, 예제 코드를 통해 사용법을 살펴보겠습니다.

1

1. 스토어 생성

다음은 Zustand로 상태 저장소(store)를 만드는 예제입니다.

store.js

const useBearStore = create((set) => ({
  // 초기값이 0으로 설정된 bears라는 상태 속성
  bears: 0,
  // bears를 증가 시키는 함수
  // 'set' 함수를 사용하여 이전 상태를 가져와서 bears 값을 1 증가
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  // bears의 상태를 0으로 초기화
  removeAllBears: () => set({ bears: 0 }),
}))

설명:

• Zustand의 store는 기본적으로 hook입니다. 여기에는 원시값, 객체, 함수 등을 모두 넣을 수 있습니다.

• set 함수를 통해서 상태를 병합하고 업데이트합니다.

• 위 코드에서는 create 함수를 사용하여 useBearStore라는 상태관리 hook를 생성하고 있습니다. 이 함수는 상태 저장소를 만들기 위해 사용됩니다. 하나의 매개변수로 set 함수를 포함하는 콜백함수를 받아 상태를 업데이트합니다.

2

2. 컴포넌트에서 사용

만든 useBearStore는 Provider 없이 어디서든 사용할 수 있습니다. 상태를 선택하면 컴포넌트는 변경 사항이 있을 때 다시 렌더링됩니다.

다음은 상태를 읽고 업데이트하는 예제 컴포넌트들입니다.

BearCounter.jsx

function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here ...</h1>
}

Controls.jsx

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

설명:

• 예제 코드와 같이 생성된 useBearStore라는 hook를 사용하여 업데이트 함수를 가져와 화면에 뿌리기도 하고, 동작시키기도 할 수 있습니다.

• BearCounter 컴포넌트는 useBearStore를 호출하여 bears 상태를 렌더링하여 화면에 표시합니다.

• Controls 컴포넌트는 increasePopulation를 통해 버튼 클릭 시 상태를 변경합니다.

• 이처럼 Zustand의 특징 중 하나는 Provider를 사용하지 않아도 상태를 가져올 수 있다는 점입니다.

---

문서 생성 정보

Document generated by Confluence on 2025-12-18 2:27 오전

Atlassian