Zustand store 생성, 사용자 상태 관리, 서버 사이드 렌더링 문제 해결

개요

라이브러리 : zustand, immer
상태 관리용 store 작성 (src/store)
immer로 불변성 관리, 더 쉬운 상태 업데이트
persist로 새로고침 후에도 상태 유지 (localStorage)
slice로 기능 별 코드 분리

발생한 이슈

zustand store의 값에 대해 서버사이드로 렌더링되는 값(초기 값)과, persist로 유지되는 값이 달라 에러 발생
hook을 만들어 데이터가 클라이언트 사이드에서 업데이트되도록 수정

주요 코드

store


import { create } from "zustand";
import { persist } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";
import { createUserSlice, userSliceType } from "./slices/user";

export const useMainStore = create( persist( immer((set) => ({ ...createUserSlice(set), })), { name: "zustand-persist", } ) );


* useStore 커스텀 훅 (서버사이드 렌더링 방지)
```typescript
import { useState, useEffect } from "react";

export 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;
};

useStore 호출 및 사용


"use client";
import { useStore } from "@/hooks/useStore";
import { useMainStore } from "@/store";
import { nanoid } from "nanoid";

const Test = () => { const store = useStore(useMainStore, (state) => state); console.log(store);

return ( <div id="test" className="flex h-14 w-full items-center justify-center rounded-2xl bg-indigo-100 text-black" onClick={() => store!.setNickname(nanoid())}

user nickname : {store && store.user.nickname}

Cocktail-Masters / Banana-Vote-FE

Zustand store 생성, 사용자 상태 관리, 서버 사이드 렌더링 문제 해결 #157

개요

발생한 이슈

주요 코드