React Error Rendered more hooks than during the previous render

Uncaught Error: Rendered More Hooks Than During the Previous Render.

해당 에러는 회원 가입 처리를 할 때 데이터 list를 select option으로 뿌리려고 할 때 발생한 에러이다. 에러를 직역하면 이전 렌더링 보다 많은 hook을 렌더링했다는 것이다.

에러 해결

const { isLoading, isError, data, error } = getCampusListQuery();

useEffect(() => {
    campusListFunc();
  }, []);

  const userListFunc = () => {
    if (isLoading) {
      //
      console.log("isLoading");
      return <Loading />;
    }
    if (isError) {
      console.log("isError >> ", error);
      return <Error error={isError} />;
    }
    setUserList(data);
  };

바로 해결 코드를 보자. getCampusListQuery() useQuery로 api로부터 데이터를 긁어오는 함수이다.
useQuery의 경우, 쿼리 처리를 isLoading, isError로 예외처리를 할 수 있다.

나의 경우, 데이터를 긁어올 때 걸리는 지연 때문에 useQuery로 로딩 예외처리를 하고 싶었다
이 때, useEffect 밖에서 예외처리를 했기 때문에 해당 에러가 발생했다

즉 적절한 scope에서 예외처리를 하면 된다. useEffect 함수 내에서 바로 페이지를 return 하지 못하므로, useEffect 내에 campusListfunc()에 loading 등의 처리를 하면 에러가 발생하지 않는다