Zustand의 create vs createStore

Zustand 는 간단하고 강력한 상태 관리 라이브러리 입니다.

이 라이브러리를 사용하기 위해서는 두개의 주요 API 를 제공하는데요. create / createStore 두가지를 제공합니다.

처음 라이브러리를 확인했을때 어떤 용도로 써야하는지 고르기가 어려웠는데요, 두개의 차이점을 알아보고 언제 어떤 API 를 사용해야 하는지 알아보겠습니다.

기본 개념

create

create는 Zustand에서 가장 일반적으로 사용되는 API입니다. 이 함수는 React 훅을 생성하여 컴포넌트에서 상태를 쉽게 사용할 수 있게 해줍니다. 기본적으로 React Hook 에 최적화 되어있습니다.

createStore

createStore는 더 낮은 수준의 API로, store 인스턴스를 직접 생성하고 관리할 때 사용됩니다.
즉, React Hook 에 종속된게 아닌 별도의 관리를 줄 수 있습니다.

주요 차이점

사용목적

• create: React 컴포넌트에서 바로 사용할 수 있는 커스텀 훅을 생성합니다.

• createStore: store 객체를 직접 생성하고 관리합니다.

반환 값

• create: React 훅을 반환합니다.

• createStore: store 객체 (getState, setState, subscribe 등의 메서드 포함)를 반환합니다.

사용 방식

// create 사용 예
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// 컴포넌트에서 사용
const { count, increment } = useStore();

// createStore 사용 예
const store = createStore((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// store 메서드 직접 사용
console.log(store.getState().count);
store.setState({ count: 10 }); 

실 사용 예시

// 공통 타입 정의
type UserState = {
  user: { name: string; email: string } | null;
};

type UserActions = {
  setUser: (user: { name: string; email: string }) => void;
  clearUser: () => void;
};

type UserStore = UserState & UserActions;

const initialState: UserState = { user: null };

// 1. create를 사용한 방식
import create from 'zustand';

export const useUserStore = create<UserStore>((set) => ({
  ...initialState,
  setUser: (user) => set({ user }),
  clearUser: () => set({ user: null }),
}));

// 컴포넌트에서 사용 예:
// const { user, setUser, clearUser } = useUserStore();

// 2. createStore를 사용한 방식
import { createStore } from 'zustand/vanilla';

export const createUserStore = (initState: UserState = initialState) => {
  return createStore<UserStore>((set) => ({
    ...initState,
    setUser: (user) => set({ user }),
    clearUser: () => set({ user: null }),
  }));
};

// store 인스턴스 생성
export const userStore = createUserStore();

// store 사용 예:
// const user = userStore.getState().user;
// userStore.getState().setUser({ name: 'John', email: 'john@example.com' });
// userStore.getState().clearUser();

// React 컴포넌트에서 사용하려면 추가 작업 필요:
import { useStore } from 'zustand';

export const useUserStoreHook = () => useStore(userStore);

// 컴포넌트에서 사용 예:
// const { user, setUser, clearUser } = useUserStoreHook();

React 통합

• create: React와 자동으로 통합되어 상태 변경 시 컴포넌트가 자동으로 리렌더링됩니다.

• createStore: React와 직접적인 통합이 없어, 필요한 경우 수동으로 상태 변경을 구독하고 리렌더링을 처리해야 합니다.

유연성

• create: 대부분의 React 애플리케이션에서 사용하기 쉽고 편리합니다.

• createStore: React 외부에서도 사용할 수 있으며, 더 세밀한 제어가 필요한 경우에 유용합니다.

언제 사용해야하나요?

• create 사용 시나리오

1. 일반적인 React 애플리케이션 개발
2. 컴포넌트 기반의 상태 관리가 필요한 경우
3. 빠르고 간단한 설정이 필요한 프로젝트

• createStore 사용 시나리오

1. React 외부 환경에서의 상태 관리
2. 더 세밀한 상태 제어가 필요한 경우
3. 커스텀 미들웨어나 플러그인 개발
4. 서버 사이드 렌더링(SSR) 최적화

결론

Zustand의 create와 createStore API는 각각 고유한 장점을 가지고 있습니다. create는 React 애플리케이션에서 빠르고 쉽게 상태 관리를 구현할 수 있게 해주는 반면, createStore는 더 낮은 수준의 제어와 유연성을 제공합니다.

React 프로젝트에서는 create로 충분하지만, react hook 을 가정하고 만든 create 대신 순수 js 로 구현시에 createStore 를 사용하는 것이 더 좋을 수 있겠습니다.