2. x2beeStore 사용하기

1번에서 설명한 zustand사용법은 매우 간단하지만 상태를 생성할때는 반복되는 코드를 줄이기 위해서 x2beeStore를 제공하고 있습니다.

 

x2beeStore 사용방법

1.testStore.ts 생성

가장 먼저 store를 다음과 같이 생성함.

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

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

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

 

2.testStore 상태 저장, 조회

 

'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;