TIL 66. 2024-04-04

Unhandled Runtime Error
Error: Rendered more hooks than during the previous render 에러 발생

“이전 렌더링 때보다 더 많은 훅을 렌더링했다”라는 뜻

즉, 훅의 호출횟수가 일정하지 않다는 뜻이다.

리액트 훅은 컴포넌트 내부 최상위 레벨에 선언해야하며, 훅은 컴포넌트를 제외하고는 다른 블럭({ }) 내부에서 이용해서는 안된다.

const { data: userInfo, isLoading: isUserLoading, isSuccess: isUserSuccess, isError: isUserError } = useUserInfo();

if (isTokenLoading || !isTokenSuccess) {
console.log("user 정보를 받는 중입니다.");
}

if (!userInfo) {
return () => {
alert("로그인 후 입장 가능합니다.");
redirect("/login");
};
}

//tanstack query의 커스텀훅인 "useGetToken"를 컴포넌트의 최상위 쪽으로 이동 시켜야한다.
//하지만 문제는 "useUserInfo" 커스텀 훅의 data(useInfo)를 useGetToken의 매개변수에 전달 받아야하므로
//isUserLoading, !isTokenSuccess의 조건문 아래에 useGetToken을 불러올 수 밖에 없는 상황이었다.
const { data: token, isLoading: isTokenLoading, isSuccess: isTokenSuccess, isError: isTokenError } = useGetToken(userInfo);
if (isTokenLoading || !isTokenSuccess) {
console.log("token 발급 중입니다.");
}

if (isTokenError) {
console.log("token 발급 중 에러가 발생했습니다.");
}

해결방법

//위의 두가지 커스텀 훅을 하나의 커스텀 훅으로 개편

export const useGetToken = (room: string) => {
  const [userInfo, setUserInfo] = useState<User | null>();

  useEffect(() => {
    const getUser = async () => {
      const userInfo = await getUserInfo();
      setUserInfo(userInfo);
    };
    getUser();
  }, []);

  return useQuery({
    queryKey: [`room`, userInfo],
    queryFn: () => getToken({ room, userInfo })
  });
};

[참고 사이트]https://yogjin.tistory.com/86