🔥 Trouble Shooting - Tanstack Query와 Zustand 상태 관리 문제 해결하기

📌 문제 설명

문제 상황

• TestPage에서 유저 정보를 가져오지 못함
• 페이지 새로고침하면 user store 데이터가 사라짐
• Layout 컴포넌트에서 반복적인 API 호출 발생

🤔 문제 접근

첫 번째 시도

// 각 페이지마다 이렇게 작성
const TestPage = () => {
  const {user} = useAuthStore();  // 여기서 문제 발생!
}

undefined가 찍히는 문제 발생..

두 번째 시도

// 이렇게 도전..
const TestPage = () => {
  const {user:storeUser} = useAuthStore();
  const {data:userData} = useUser();
  const user = storeUser || userData;
}

위처럼 해결하려 했으나..api를 다중사용하는 것을 원치않았다.
흠.. 다른방법이 없을까? 아니면 상위 요소의 컴포넌트에서 줘버리면?

💡 해결 방법

1. Layout에서 한 번에 처리하기

const Layout = () => {
  const {user:storeUser, setUser} = useAuthStore();
  const {data:userData} = useUser();
  const currentUser = storeUser || userData;

  useEffect(() => {
    if(userData && !storeUser) {
      setUser(userData);
    }
  }, [userData]);

  return (
    <>
      <Header/>
      <Outlet context={currentUser}/>
      <Footer/>
    </>
  );
};

2. useUser 훅 개선하기

const useUser = () => {
  const {token, setUser} = useAuthStore();
  
  return useQuery({
    queryKey: ['user'],
    queryFn: () => getUserProfile(token),
    onSuccess: (data) => {
      setUser(data)
    },
    staleTime: 1000 * 60 * 10,  // 10분 동안 재호출 방지
    enabled: !!token  // token이 있을 때만 API 호출
  });
};

✨ 새롭게 배운 점

1. Layout 컴포넌트에서 전역적으로 유저 정보 관리
2. staleTime으로 불필요한 API 호출 줄이기
3. token 유무에 따른 조건부 API 호출

🚀 이런 점이 효율적이에요

1. 모든 페이지에서 동일한 유저 정보 사용 가능
2. 불필요한 API 호출 감소
3. 코드 중복 제거

⭐️ 참고

나중에 각 페이지에서는 이렇게 사용:

const Profile = () => {
  const user = useOutletContext();  // Layout에서 전달된 정보 사용
  ...
};