> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/05.-state-management/1.-zustand.md).

# 1. Zustand

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

***

### Zustand

<figure><img src="/files/BaQlXjHLDhqVgtx1N4Vk" alt=""><figcaption></figcaption></figure>

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

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

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

{% stepper %}
{% step %}

### 1. 스토어 생성

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

{% code title="store.js" %}

```javascript
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 }),
}))
```

{% endcode %}

설명:

* Zustand의 store는 기본적으로 hook입니다. 여기에는 원시값, 객체, 함수 등을 모두 넣을 수 있습니다.
* `set` 함수를 통해서 상태를 병합하고 업데이트합니다.
* 위 코드에서는 `create` 함수를 사용하여 `useBearStore`라는 상태관리 hook를 생성하고 있습니다. 이 함수는 상태 저장소를 만들기 위해 사용됩니다. 하나의 매개변수로 `set` 함수를 포함하는 콜백함수를 받아 상태를 업데이트합니다.
  {% endstep %}

{% step %}

### 2. 컴포넌트에서 사용

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

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

{% code title="BearCounter.jsx" %}

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

{% endcode %}

{% code title="Controls.jsx" %}

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

{% endcode %}

설명:

* 예제 코드와 같이 생성된 `useBearStore`라는 hook를 사용하여 업데이트 함수를 가져와 화면에 뿌리기도 하고, 동작시키기도 할 수 있습니다.
* `BearCounter` 컴포넌트는 `useBearStore`를 호출하여 `bears` 상태를 렌더링하여 화면에 표시합니다.
* `Controls` 컴포넌트는 `increasePopulation`를 통해 버튼 클릭 시 상태를 변경합니다.
* 이처럼 Zustand의 특징 중 하나는 Provider를 사용하지 않아도 상태를 가져올 수 있다는 점입니다.
  {% endstep %}
  {% endstepper %}

***

<details>

<summary>문서 생성 정보</summary>

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

[Atlassian](http://www.atlassian.com/)

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/05.-state-management/1.-zustand.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.