2. Next.js 와 next-auth 의 실행 순서에 관하여

단순한 코드가 있다.

 

next-auth 의 useSession 을 사용하여, 로그인한 유저의 데이터값을 가져오고

 

데이터값을 활용하여 fetch 를 하는 코드이다.

 

const MyTestResults = (props: { userId: string | null | undefined }) => {
  const { userId } = props;		// 페이지에서 useSession 을 통해, 로그인한 유저의 아이디를 넘겨받는다.
  const [userResultData, setUserResultData] = useState<UserTestType[]>();
  
  useEffect(() => {
    (async () => {
      const userData = await fetch("/api/get-user-test-data", {
        method: "POST",
        body: JSON.stringify({
          userId: userId,	// Id를 넣는다.
        }),
        headers: {
          "Content-Type": "application/json",
        },
      });

      const resultData = await userData.json();

      setUserResultData(resultData.data);
    })();
  }, []);

 

문제는 useEffect 안에서, userId 가 생성되지 않는다.

정확히는 useEffect 실행 후, useSession에서 받아온 userId 가 페이지에서 받아와진다.

 

따라서, useEffect안에서 실행되는 fetch 에는 body 값에 undefined 가 참조되고, fetch가 정상적으로 이루어지지않는다.

 

이는 next-auth 의 실행이 렌더 이후에, (useEffect 의 초기 렌더후 실행되는 콜백함수의 실행 보다도 더)

이루어 지므로, 해당 값이 제대로 들어가지 않음을 의미했다.

 

따라서 useEffect 의존성배열에 props 값을 넣어 해결했다.

 

     	...
     const resultData = await userData.json();

      setUserResultData(resultData.data);
    })();
  }, [userId]);

 

간단한 해결방법이고 간단한 오류지만, next-auth 의 값을 가져오는 시기를 알 수 있는 오류라 정리해보았다.