zustand를 사용한 유저 정보 전역 관리

---

➡️ 문제 상황 !

 

메인 화면에서 유저의 email을 유저 네임으로 보여주기 위해 유저 정보가 필요한 상황.

 

1차: useState로 1:1 관리

2차: 전역에서 관리하기 위해 store 작업

3차: 로그인이 되었을 때만 유저정보를 가져오도록 리팩토링

---

 

1차 시도 ->
필요한 파일마다 useState로 유저 데이터를 관리 (1:1)

const [userData, setUserData] = useState<User | null>(null)

  useEffect(() => {
    const fetchData = async () => {
      const supabase = createClient()
      const { data: { user }, error } = await supabase.auth.getUser()
      setUserData(user)
    }
    fetchData()
  }, [])

  const email = userData ? userData.email : null

 

지금은 페이지가 몇개 없어서 괜찮지만, 리팩토링 진행하면 유저 데이터가 어디서 더 필요할지 몰라서 전역에서 관리해버리게 루트에 있는 store 폴더에 유저의 정보를 관리하는 파일을 만들기로 했다.

 

2차 시도 -> (1: N)

굿 잘 들어온다

// @/store/useUserStore.ts

export const useUserStore = create<UserState>((set) => ({
  user: null,
  fetchUser: async () => {
    const supabase = createClient()
    const { data: { user }, error } = await supabase.auth.getUser()
    /* if (error) ... */
    set({ user })
  },
}))


// 사용
import { useUserStore } from '@/store/useUserStore'

 const user = useUserStore(state => state.user)
 const fetchUser = useUserStore(state => state.fetchUser)

 useEffect(() => {
   fetchUser()
 }, [fetchUser])

 const email = user ? user.email : null

 

 

3차 시도 -> 

미들웨어에서 인증상태에 따라 경로 접근 차단하고 나니까 로그인 하지도 않았는데 웹페이지에 접근하기만 하면 루트의 middleware에서 세션 없다고 계속 에러 메세지를 보내는게 거슬려서 세션을 체크하고 fetchUser해오도록 코드를 추가했다.

// @/store/useUserStore.ts

export const useUserStore = create<UserState>((set) => ({
   {/* user: null,*/}
  isLogin: false,
  {/* fetchUser, 같음 */}
  checkisLogin: async() => {
    const supabase = createClient()
    const {
      data: { session },
      error,
    } = await supabase.auth.getSession()
    if (error) {
      console.error('Check isLogin ERROR:', error)
    }
    if (session) {
      set({ isLogin: true })
      await useUserStore.getState().fetchUser()
    } else {
      set({ isLogin: false })
    }
  },
}))