zustand, 스토리지 활용하기 (세션, 로컬, persist)

 

 

오늘은 팀원분이 구현해주신 로그인 기능에서 로그인된 유저의 정보를 props로 전달하지 않고

zustand를 사용하여 유저의 정보를 전역 상태로 관리하는 과정을 기록해볼게요

 

API 요청

export const login = async (userData) => {
  const response = await axios.post(`${API_URL}/login`, userData);
  return response.data;
};

 

로그인 핸들러

  const handleLogin = async (formData) => {
    try {
      const loginData = await login(formData);
      localStorage.setItem("accessToken", loginData.accessToken);
      const userProfile = await getUserProfile(loginData.accessToken);
      setUser(userProfile); 
      navigate("/");
    } catch (error) {
      alert("로그인에 실패했습니다. 다시 시도해주세요.");
    }
  };

 

 

먼저 코드를 살펴보니 부모 컴포넌트에서 props로 받아온 setUser를 업데이트하고 

로컬 스토리지에 토큰을 저장하는 방식을 사용하고 있는데 어쩌면 

prop drilling이 발생할 수 있는 문제점과 로컬 스토리지에 담게 되면 해당 내역을

삭제 하기 전 까진 기록이 남아있기 때문에 세션 스토리지를 사용하는게 좋지 않을까 생각이 들었습니다.

 

라우터에서 무수히 전달되는 props

const [user, setUser] = useState(null);

  return (
    <BrowserRouter>
      <Layout user={user} setUser={setUser}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login setUser={setUser} />} />
          <Route path="/signup" element={<Signup />} />
          <Route
            path="/mypage"
            element={
              <ProtectedRoute user={user}>
                {/* user가 없으면 로그인 페이지로 리디렉션 */}
                <MyPage user={user} setUser={setUser} />
                {/* MyPage 컴포넌트에 user와 setUser 전달 */}
              </ProtectedRoute>
            }
          />
        </Routes>
      </Layout>
    </BrowserRouter>
  );

역시 많은 컴포넌트에서 user를 props로 전달받고 있기 때문에 얼른 전역 상태로 수정 시켜야겠네여

 

전역 상태 관리 스토어

import { create } from "zustand";
import { persist, createJSONStorage } from "zustand/middleware";
const useAuthStore = create(
  persist(
    (set, get) => ({
      user: "",
      token: "",

      setAuth: (user, token) => set({ user, token }),
      clearAuth: () => set({ user: "", token: "" })
    }),
    {
      name: "authStorage",
      storage: createJSONStorage(() => sessionStorage)
    }
  )
);  

export default useAuthStore;

 

 

zustand와 persist를 사용하여 해당 상태를 세션 스토리지에 저장하여 사용해주었는데

기본적으로 persist는 로컬 스토리지를 관리하는데 용이하기 때문에 

스토리지를 세션으로 바꾸려면 공식 문서에 나와있는데로 createJSONStorage를 임포트해서

storage 부분을 세션 스토리지로 넣어주어야 합니다.

 

 

결과

 

 

 

마치며

 

여담으로  zustand 코드를 보면 상태관리 코드 외에는 다른 로직은 존재하지 않는데 

사실 zustand 안에서 API를 요청하거나 하는 방법도 있겠지만 여러번 사용되지 않는 함수거나

 

로그인 페이지 외에서는 사용되지 않을 login 함수를 굳이 zustand에 넣으면 덜 깔끔해 보여서 

로그인 페이지에서 해당 함수를 관리하고  zustand는 전역 상태만 관리할 수 있도록 설계해 보았씀다

 

요즘 어떻게 하면 더 효율적으로 코드를 쓸 수 있을지 그런 고민이 생기면서 머리가 어지럽네여

역시 아무생각 없이 코드 치는게 기분이 좋은 것 같아여 빠이..