최종 프로젝트
게임 추천 및 커뮤니티 사이트
- [에러 해결] Hooks 사용 시 에러
학습 내용
useQuery 사용 시 에러
hooks는 매 렌더링마다 동일한 호출을 보장받아야 한다. 그렇기 때문에 hooks를 조건문 안에서 쓸 수 없고, 컴포넌트 최상위에서 사용하라고 권장되는 이유이다.
그런데 조건문 안에서 직접 사용하지 않더라도 오류가 발생하는 상황들이 있다. 아무리 코드를 수정해도 오류가 해결되지 않아서 에러를 잡느라 시간이 오래 걸렸지만, 다행히 해결을 했다.
문제 상황
⚡
Rendered more hooks than during the previous render.
오류를 해결하려면 모든 후크를 함수 구성 요소의 최상위 수준으로 이동하고 조건 내부에서 후크를 사용하지 말라고 한다. 내 코드에서 조건문 안에서 useQuery를 사용하지 않았다.
원인: 조건부로 Hook을 호출
const gameDetailsQueryConfigs =
topTen?.map((game: any) => {
const appid = game.appid;
return {
queryKey: ['gameDetails', appid],
queryFn: () => getGameDetails(appid),
enabled: appid !== undefined
};
}) || [];내가 생각한 오류 원인은
1. map 함수 내부에서 사용해서 문제가 된건가?
2. map을 돌리는 데이터가 topTen? 부분에서 optional chaning을 사용해서 이것도 조건문으로 보는 것인가?
해결: 조건을 후크 내부로 이동
일단 옵셔널 체이닝이 문제는 아니었다.
useQueries 위쪽에 isLoading, isError로 에러를 잡기 위한 조건문을 넣었었는데, 이 부분을 삭제했더니 오류가 해결되었다.
if (isLoading) {
<p>게임 정보를 불러오는 중입니다...</p>;
}
if (isError) {
<p>게임 정보를 불러오지 못했습니다.</p>;
}📌
후크 사용 시 주의사항
- 최상위 수준에서만 후크를 호출하세요.
- 루프, 조건문 또는 중첩된 함수 내에서 후크를 호출하지 마세요.
- 조기 반환 전에 항상 React 함수의 최상위 수준에서 후크를 사용하세요.
- React 함수 구성요소 또는 사용자 정의 후크에서만 후크를 호출하세요.
오늘의 회고
조건문이 먼저 실행되어서 useQuery가 제일 상단에서 사용되지 않았다고 판단하는 것 같다. 코드를 작성할 때 순서도 중요하다. useQueries는 처음 사용해서, 이 부분이 문제가 되는 줄 알고 공식문서랑 여러 블로그를 찾아보면서 애썼는데, 생각보다 간단하게 문제가 해결되어서 조금 허탈했다...
그래도 가장 힘들었던 Steam API 불러오는 것이 해결되어서, 메인페이지랑 상세페이지는 조금씩 진도가 나가고 있다. 다행이다...
