Zustand🐻 (with. zod)

설치

yarn add zustand

기본 사용법

schema와 type 생성

// schema.ts
import { z } from "zod";

// state 스키마 정의
export const TodoSchema = z.object({
  id: z.number(),
  content: z.string(),
  isDone: z.boolean(),
});

// 전체 스토어에 대한 스키마 정의 (state + actions)
export const TodoStoreSchema = z.object({
  todos: TodoSchema.array(),
  actions: z.object({
    addTodo: z.function().args(z.string()),
    checkTodo: z.function().args(z.number()),
    removeTodo: z.function().args(z.number()),
  }),
});

// types.ts

import { z } from "zod";
import { TodoStoreSchema } from "./schema";

export type TodoStoreState = z.infer<typeof TodoStoreSchema>;

store 생성

방법 1

// useTodoStore.ts
import { TodoStoreState } from "./types";

export const useTodoStore = create<TodoStoreState>((set) => ({
  todos: [],
  addTodo: (content) => set((state) => {...}),
  checkTodo: (todoId) => set((state) => {...}),
  removeTodo: (todoId) => set((state) => {...}),
}));

방법2 - 참고🔗

// useTodoStore.ts
import { TodoStoreState } from "./types";

export const useTodoStore = create<TodoStoreState>((set) => ({
  todos: [],
	actions: {
	  addTodo: (content) => set((state) => {...}),
	  checkTodo: (todoId) => set((state) => {...}),
	  removeTodo: (todoId) => set((state) => {...}),
	}
}));

⁂ 불필요한 리렌더링을 막기 위해 각 state를 따로 호출해야하는 store의 특성 상 방법 1의 경우 작성은 간단하지만 호출 시 코드가 길어질 수 있음

const todos = useTodos();
const addTodo = useAddTodo();
const checkTodo = useCheckTodo();
const removeTodo = useRemoveTodo();

⁂ state는 반드시 따로 호출하는 것이 좋지만 actions의 경우 값이 고정되어있기 때문에 리렌더링에 영향을 주지 않으므로 방법2와 같이 묶어서 관리하는 것이 사용할 때 간편함

const todos = useTodos();
const { addTodo, checkTodo, removeTodo } = useTodoActions();

state의 사용

1. 잘못된 사용

   /**
   * ❌ 불필요한 렌더링이 일어날 수 있음 
   * => useTodoStore()는 실제로 전체 state를 가져오기 때문에
   */
   
   const {todos, addTodo, checkTodo, removeTodo} = useTodoStore()

2. shallow 사용 - 업데이트 전후 값을 비교하여 값이 변하였을 때만 리렌더링이 일어나도록 해

   const { todos, addTodo } = useTodoStore(
       (state) => ({
         todos: state.todos,
         addTodo: state.actions.addTodo,
       }),
       shallow
     );

3. 각각 호출 - 사용할 때 마다 (state) => state.todos 와 같은 selector를 입력해줘야 함

   // store 생성에서 actions를 분리한 경우
   const todos = useTodoStore((state) => state.todos);
   const {addTodo, checkTodo} = useTodoStore((state) => state.actions);

4. custom hook을 export하여 사용 - 추천
   (사용시 일일이 selector를 입력하지 않아도 되어서 편함)

   ```tsx
   // useTodoStore.ts
   
   export const useTodos = () => useTodoStore(state => state.todos);
   export const useTodoActions = () => useTodoStore(state => state.actions);
   ```
   
   ```tsx
   // page.tsx
   (...)
   	const numA = useNumA()
   	const { increaseA } = useCounterActions()
   (...)
   ```

Middleware

persist사용

데이터를 storage에 자동으로 저장

partialize 속성을 사용하여 storage에 state만 담기도록 설정
(⁂ zustand에서 storage에 데이터를 저장할 때 함수 데이터를 제외하고 저장.
partialize 미적용 시 actions 객체 내에 함수들을 정의하면 storage내에 actions가 빈 객체로 저장되어 함수 객체들이 지워짐)

import { persist } from "zustand/middleware";

export const useTodoStore = create<TodoState>()(
    persist(
			(set) => {...},
      { name: "todo-storage", partialize: (state) => ({ todos: state.todos })}
    )
);

persist options

• name : storage에 저장 될 데이터의 이름을 지정. 고유한 이름으로 설정해야 함.
• partialize :
• storage에 저장 될 데이터를 선택할 수 있음.
• 객체의 key값은 반드시 state의 key값과 일치해야 함
  예를 들어 아래와 같이 { todos: state.todos[0] } 를 return해주면 todos 배열의 첫번째 객체만 storage에 저장이 됨.

  ```tsx
  { name: "todo-storage", partialize: (state) => ({ todos: state.todos[0] })}
  ```

immer 사용

객체,배열 데이터의 불변성 관리

yarn add immer - 설치 필요

import { immer } from "zustand/middleware/immer";

// immer가 persist를 감싼다
export const useTodoStore = create<TodoState>()(
  immer(
    persist(
      (set) => {...},
      { name: "todo-storage" }
    )
  )
);

// immer 적용 전
export const useCounterStore = create<CounterState>()(immer((set) => ({
  count: 0,
  increase: () => set((state) => ({ ...state, count: state.count + 1 })),
})));

// immer 적용 후
export const useCounterStore = create<CounterState>()(immer((set) => ({
  count: 0,
  increase: () => set((state) => { state.count += 1 },
})));

devtools 사용

개발자도구.

chrome확장 프로그램 redux devtools 설치 후 사용 가능

import { devtools } from "zustand/middleware";

export const useTodoStore = create<TodoState>()(
  devtools(
		(set) => {...}
  )
);

개발자도구의 Redux탭에서 확인가능

💡 **권장 middleware 중첩순서 :** `immer > devtools > persist`

기타 설정

useStore로 hydration에러 예방

1. 아래 코드를 복붙하여 useStore.ts 파일 생성

   import { useState, useEffect } from "react";
   
   const useStore = <T, F>(
     store: (callback: (state: T) => unknown) => unknown,
     callback: (state: T) => F
   ) => {
     const result = store(callback) as F;
     const [data, setData] = useState<F>();
   
     useEffect(() => {
       setData(result);
     }, [result]);
   
     return data;
   };
   
   export default useStore;

2. state selector hook 생성시 useStore에 store와 selector 전달

   // state사용시 useStore에 store와 selector 전달
   export const useTodos = () => useStore(useTodoStore, (state) => state.todos);
   // actions는 useStore를 사용하지 않음
   export const useTodoActions = () => useTodoStore((state) => state.actions);

   💡 * zustand는 브라우저의 데이터를 사용. * zustand의 데이터를 사용하여 화면을 그리게 되면 next의 서버측 렌더링과 클라이언트 렌더링이 달라 에러가 발생. * zustand가 컴포넌트를 변경하기 전에 잠시 기다리도록 하는 useStore hook사용으로 에러 방지.

React-query와 함께 사용하기

const useFilterStore = create((set) => ({
  applied: [],
  actions: {
    addFilter: (filter) =>
      set((state) => ({ applied: [...state.applied, filter] })),
  },
}))

export const useAppliedFilters = () =>
  useFilterStore((state) => state.applied)
export const useFiltersActions = () =>
  useFilterStore((state) => state.actions)

// 🚀 zustand store를 query와 결합
export const useFilteredTodos = () => {
  const filters = useAppliedFilters()
  return useQuery({
    queryKey: ['todos', filters],
    queryFn: () => getTodos(filters),
  })
}