zustand로 유저정보 전역관리하기 (supabase)

프로잭트를 하면서 zustand를 처음 써보게 되었다.

user정보 여부에따라 header를 바꿔줄려고 사용하게 되었는데 기록해보고자 한다.
본인은 next.js와 typescript, supabase를 사용중이다.

일단 useAuth.ts 파일을 훅 안에 만든다.

import { User } from '@supabase/supabase-js';
import { create } from 'zustand';


export type AuthStore = {
  user: User | null;
  setUser: (user: User | null) => void;

};


// user =>기본값  
const useAuth = create<AuthStore>((set) => ({
  user: null,
  setUser: (user) => set(() => ({ user })),
 
}));

export default useAuth;

.
setUser를 이용해서 user정보를 user에 넣어줄것이다.

필자의 경우 supabase에서 user 정보를 계속 추적해주는 onAuthStatechange를 최상위 컴포넌트에서 사용해줬다.

useEffect(() => {
    supabase.auth.onAuthStateChange((event, session) => {
      console.log(event, session);

      if (session) {
        setUser(session.user);
      } else {
        setUser(null);
      }
    });
  }, []);

와 같이 작성해줬는데 session이 있을경우(로그인 한 유저가 있을 경우) setUser를 사용해서 유저정보를 zustand로 넘겨줄 수 있도록 했으며 session이 없을 경우 null을 다시 넣어줄 수 있도록 했다.

처음엔 localstorage를 사용하고자 했는데 server와 client의 렌더링 순서때문인지 오류가 발생해서 프로잭트에서 사용하고 있는 지도api가 나타나지 않는 현상이 발생하길래 수정하게 되었다.
next.js, zustand 공부를 좀 더 해야할 것 같다 ㅠ 편리하지만 어렵다..!ㅠ