[TIL] 2022-10-27

React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render

위와 같은 오류를 발견하였다.
해결방법은 아래의 블로그에 자세히 나와있다.

React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. 에러 헤결하기

이 에러가 일어난 원인은 hook은 문서의 최상단에, 어떠한 값이 return 되기 전에 정의되어야 하기 때문에, hook을 사용하기 전에 조건문으로 return 하는 코드가 있으면 에러가 발생하게 되는 것이었다.
코드를 작성하던 중 data === undefined을 분기처리 해줘야만 코드가 정상적으로 돌아가길래

if (data === undefined) {
  return console.log("data is undefined");
}

useEffect (() => {});

이렇게 썼는데 바로 에러가 났다.

useEffect (() => {});

if (data === undefined) {
  return console.log("data is undefined");
}

이렇게 고치니까 바로 잘 돌아가게 되었다.