> 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 %}