> 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/2.-x2beestore.md).

# 2. x2beeStore

이 문서는 Next.js 프로젝트에서 상태를 관리하기 위한 x2beeStore를 사용하는 방법을 안내합니다.

첫번째 단계에서 파일을 생성하여 상태를 정의하고, 두번째 단계에서 정의한 상태를 저장하고 조회하는 방법을 안내합니다.

Zustand 사용법은 매우 간단하지만 상태를 생성할 때 반복되는 코드를 줄이기 위해 x2beeStore를 제공합니다.

## x2beeStore 사용방법

{% stepper %}
{% step %}

### 파일 생성 및 상태 정의

아래 코드는 `testStore.ts` 파일을 생성하고 x2beeStore를 사용하여 상태를 관리하는 예제입니다.

{% code title="testStore.ts" %}

```
```

{% endcode %}

```typescript
import x2beeStore from '@/lib/common/plugins/x2beeStore';

export const testState = {
  test1: '',
  test2: '',
  test3: '',
};

const useTestStore = x2beeStore('testStore', testState);

export default useTestStore;
```

위 코드와 같이 `x2beeStore`를 import하고, `testState`처럼 객체를 정의합니다.\
그리고 `x2beeStore` 함수를 사용하여 상태 저장소를 생성하고, 초기 상태로 `testState` 객체를 사용하여 `useTestStore` 변수에 할당합니다.
{% endstep %}

{% step %}

### 상태 저장 및 조회 예제

다음은 `testStore` 상태를 저장하고 조회하는 예제 컴포넌트입니다.

{% code title="TestPage.tsx" %}

```
```

{% endcode %}

```tsx
'use client';

import useTestStore from '@/lib/common/stores/testStore';

const TestPage = () => {
  function setStore() {
    useTestStore.setState({
      test1: '11111',
      test2: '22222',
      test3: '3333'
    });
  }

  function getStore() {
    const store = useTestStore.getState();
    console.log(store);
  }

  return (
    <>
      test2222
      <button onClick={() => setStore()}>상태 저장</button>
      <button onClick={() => getStore()}>상태 조회</button>
    </>
  );
};

export default TestPage;
```

`useTestStore`라는 이름으로 `testStore.ts` 파일에서 생성한 상태 저장소를 가져옵니다.\
`setStore`와 `getStore` 함수 예제를 바탕으로 상태를 저장하고 조회할 수 있습니다.
{% endstep %}
{% endstepper %}

{% hint style="info" %}

* 이 가이드는 x2beeStore(내부적으로 Zustand를 사용)를 간단히 사용하는 방법을 설명합니다.
* 실제 프로젝트에서는 타입 정의, 부분 업데이트, 미들웨어(예: persist) 적용 등을 추가로 고려하세요.
  {% endhint %}


---

# 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/2.-x2beestore.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.