(6.11) 회원가입시 프로필 정보 자동 생성하기 Q. 호출 순서 문의

안녕하세요 6.11 회원가입시 프로필 정보 자동 생성하기 강의중18:17 분 쯤에

아래처럼 useProfileData(session?.user.id) -> useEffect 훅을 선언하는데

처음에는 session?.user.id이 값이 없는데 useProfileData 훅을 먼저 부르는게 맞나요?

저는 useEffect -> useProfileData 이 순서가 맞다고 생각해서요

원본

export default function SessionProvider({ children }: { children: ReactNode }) {
  const session = useSession();
  const setSession = useSetSession();
  const isSessionLoaded = useIsSessionLoaded();

  const {
    data: profile,
    isLoading: isProfileLoading,
    isPending,
  } = useProfileData(session?.user.id);

  useEffect(() => {
    supabase.auth.onAuthStateChange((event, session) => {
      setSession(session);
    });
  }, []);

  if (!isSessionLoaded) return <GlobalLoader />;
  if (isProfileLoading) return <GlobalLoader />;

  return children;
}

내 생각

export default function SessionProvider({ children }: { children: ReactNode }) {
  const session = useSession();
  const setSession = useSetSession();
  const isSessionLoaded = useIsSessionLoaded();

  useEffect(() => {
    supabase.auth.onAuthStateChange((event, session) => {
      setSession(session);
    });
  }, []);
  
  const {
    data: profile,
    isLoading: isProfileLoading,
    isPending,
  } = useProfileData(session?.user.id);


  if (!isSessionLoaded) return <GlobalLoader />;
  if (isProfileLoading) return <GlobalLoader />;

  return children;
}

  useEffect(() => {
    supabase.auth.onAuthStateChange((event, session) => {
      setSession(session);
    });
  }, []); 

// (... 중략) 
export function useProfileData(userId?: string) {
  const session = useSession();
  const isMine = userId === session?.user.id;

  return useQuery({
    queryKey: QUERY_KEYS.profile.byId(userId!),
    queryFn: async () => {
      // (... 중략)
    },
    enabled: !!userId, // <- userId가 있을 때 실행 된다
  });
}