[TIL-0511] Zustand create() vs. create()()

🌟 zustand store에서 create(...)와 create(...)()

zustand store를 정의하는 예제를 보면, create(...)처럼 괄호 하나만 사용하는 코드도 있고, create(...)()와 같이 괄호 두 개를 사용하는 코드도 있다.

구분	create(...)	create(...)()
의미	store 생성 함수를 반환함	store 객체 그 자체를 바로 생성함
사용 상황	보통 다른 파일에서 store를 만들기 위한 팩토리 함수로 사용할 때	보통 즉시 사용할 store를 만들 때
반환값	store 생성 함수	store 객체 (Hook 포함)
용도	나중에 여러 개 생성하고 싶을 때	전역 store 하나 만들 때
사용 예	팩토리 패턴, 테스트용 store	실제 앱 상태 관리

create(...)와 create(...)()는 보기엔 괄호 하나 차이지만, 타입 처리 방식, 사용 목적, 확장성 면에서 중요한 차이가 있다.
이제부터 create(...)와 create(...)() 차이점에 대해 자세히 알아보자.

---

🌟 create(...) : "함수"를 반환하는 형태

const makeUserStore = () => {
  return create((set) => ({
    data: null,
    setData: (data: any) => set({ data }),
  }));
};

• 이 경우 create(...)는 store를 생성해주는 함수를 반환함

  • makeUserStore()를 호출해야 진짜 store가 만들어짐

  • 즉, 이 구조는 store를 나중에 원하는 시점에 만들고 싶을 때 유용함

    const userStore = makeUserStore(); // 실제 store 객체 생성
    
    // 상태 읽기
    const currentData = userStore.getState().data;
    console.log("현재 데이터:", currentData);
    
    // 상태 변경
    userStore.getState().setData("Hello Zustand!");
    

• 왜 이렇게 쓰나?

  • 여러 store 인스턴스를 만들고 싶은 경우 (예: 사용자별 store)

    // factory.ts
    import { create } from "zustand";
    
    export const makeUserStore = (initialName: string) => create(() => ({
      name: initialName,
      setName: (newName: string) => set({ name: newName }),
    }));

    // example.ts
    const userStore1 = makeUserStore("Alice");
    const userStore2 = makeUserStore("Bob");
    
    console.log(userStore1.getState().name); // Alice
    console.log(userStore2.getState().name); // Bob

    • 이렇게 쓰는 이유
      • 하나의 useUserStore Hook을 여러 사용자에 대해 독립적으로 관리하고 싶을 때
      • userStore1, userStore2는 서로 상태를 공유하지 않음 → 멀티 인스턴스 관리 가능

  • 유닛 테스트에서 isolated store를 만들 때

    // counterStore.ts
    import { create } from "zustand";
    
    export const makeCounterStore = () => create((set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
    }));

    // counterStore.test.ts
    import { makeCounterStore } from "./counterStore";
    
    test("increment increases count", () => {
      const store = makeCounterStore();
      expect(store.getState().count).toBe(0);
      
      store.getState().increment();
      expect(store.getState().count).toBe(1);
    });

    • 이렇게 쓰는 이유
      • 테스트할 때 상태가 독립적이어야 함 (다른 테스트와 간섭 없음)
      • create()를 함수로 감싸서 store를 매번 새로 만들 수 있음 → 테스트의 순수성 유지

  • DI(Dependency Injection) 패턴처럼 store를 주입할 필요가 있을 때

    // storeFactory.ts
    import { create } from "zustand";
    
    type TodoStore = {
      todos: string[];
      addTodo: (todo: string) => void;
    };
    
    // 독립된 store 인스턴스를 만들어주는 팩토리 함수
    export const makeTodoStore = (initialTodos: string[] = []) => create<TodoStore>((set) => ({
      todos: initialTodos,
      addTodo: (todo) => set((state) => ({ todos: [...state.todos, todo] })),
    }));

    ✏️ storeFactory.ts 설명

    • makeTodoStore() : zustand의 create(...)를 반환하는 함수
    • 호출할 때마다 새로운 store가 생성되므로, 서로 다른 인스턴스를 독립적으로 만들 수 있음
    • initialTodos는 초기값을 외부에서 전달받음 → 초기 상태 유연하게 설정 가능

    // TodoComponent.tsx
    import { FC } from "react";
    import { makeTodoStore } from "./storeFactory";
    
    interface Props {
      store: ReturnType<typeof makeTodoStore>; // store 타입 지정
    }
                        
    const TodoCompoent: FC<Props> = ({ store }) => {
      const todos = store((state) => state.todos); // 상태 구독
      const addTodo = store((state) => state.addTodo); // 액션 구독
      
      return (
        <div>
        	<button onClick={() => addTodo("New Task")}>Add</button>
            <ul>{todos.map((todo, idx) => <li key={idx}>{todo}</li>)}</ul>
        </div>
      );
    };

    ✏️ TodoComponent.tsx 설명

    • store는 props로 전달받은 zustand store 인스턴스
    • store((state) => state.todos) : 상태를 구독함. 상태가 바뀌면 자동으로 리렌더링됨
    • store((state) => sttad.addTodo) : 액션도 이렇게 접근 가능
    • addTodo("New Task")를 누르면 상태가 업데이트됨 → todos 리스트도 자동 업데이트됨
    • 이 구조는 React Hook인 useUserStore((state) => state.xxx)와 정확히 같은 동작을 하지만, 전역 store를 사용하지 않고 외부에서 주입했다는 점이 다름

    // App.tsx
    const todoStore = makeTodoStore(["Read book"]);
    
    <TodoComponent store={todoStore} />;

    ✏️ App.tsx 설명

    • todoStore는 하나의 zustand store 인스턴스
    • ["Read book"]이라는 초기값으로 생성
    • 이 store를 TodoComponent에 props로 넘겨줌
    • 이제 TodoComponent는 외부에서 주입받은 이 store만을 사용하게 됨

    • 이렇게 쓰는 이유
      • store를 외부에서 주입(DI: Dependency Injection) → 컴포넌트가 어떤 store를 쓸지 유연하게 결정 가능
      • 테스트 환경 / 실제 환경에 따라 다른 store를 주입할 수 있음 → 컴포넌트 재사용성 향상

---

🌟 create(...)() : 바로 실행해서 "store 객체"를 반환하는 형태

// 전역 store (store가 즉시 만들어짐)
const useUserStore = create((set) => ({
  data: null,
  setData: (data: any) => set({ data }),
}));

• 가장 일반적인 사용법
  • create()에 바로 함수 넣고 그 자리에서 실행해서 바로 store 객체를 만듦
  • 결과적으로 useUserStore는 hook처럼 바로 사용할 수 있는 store 객체임

    const data = useUserStore((state) => state.data);

    • useUserStore는 useStore Hook처럼 동작함
    • 보통은 전역 상태 관리할 때 이 방식으로 씀

---

🌟 내부 동작 차이

• create(...)의 리턴값은 userStore Hook + store 메서드를 담은 객체
• 하지만 create 자체는 함수이며, 실행되어야 진짜 store가 생김

• 따라서 create(...)()는 create(...)로 설정만 만든 후 ()로 즉시 실행하는 형태

---

🌟 예제 비교

1. create()만 사용하는 경우 (함수 반환)

   const makeStore = () => create((set) => ({
     count: 0,
     increment: () => set((state) => ({ count: state.count + 1 })),
   }));
   
   const store1 = makeStore(); // 각각 다른 store
   const store2 = makeStore();

   • store1, store2는 각각 독립된 상태 가짐

2. create()()로 바로 사용하는 경우 (공용 store)

   const userCounterStore = create((set) => ({
     count: 0,
     increment: () => set((state) => ({ count: state.count + 1 })),
   }));

   • useCounterStore는 앱 전체에서 동일한 store 인스턴스를 공유함