[Expo] react native useEffect 'Invalid hook call' 해결 방법

Invalid Hook call

문제 상황

react native에서 api를 따로 폴더로 분류해 페이지에서 useEffect를 통해 로드하였는데, api 호출 자체가 안 되는 문제가 발생했다. 최상위에서 호출했고 함수형 컴포넌트를 사용했다. 또한, 다른 블로그 글에서 react와 react-dom의 버전이 달라 문제가 발생할 수 있다고 했지만, 이 부분에도 문제가 없었다.

react로 할 때에는 겪지 못 했던 에러라서(호출 자체가 안 되니) react native 자체의 에러인가? 싶었는데, 생각보다 간단했다.

아래는 내가 확인한 에러 화면이다.

hook의 규칙

사이트를 통해 hook의 규칙을 확인했고, 내용은 아래와 같다. (여기서 hook이란 use...로 시작하는 것들이다.)

1. 반복문 혹은 조건문 내부에 hook을 호출하지 않는다.
2. return 값으로 hook을 호출하지 않는다.
3. 이밴트 핸들러 내부에 hook을 호출하지 않는다.
4. 클래슬형 컴포넌트에서 hook을 호출하지 않는다.
5. useMemo, useReducer, useEffect 내부에서 hook을 호출하지 않는다.
6. 항상 최상위에 호출한다.

이외에, 버전 문제로 react와 react-dom의 버전이 같아야 하며, react-dom 버전 > 16.8.0 or react-native 버전 > 0.59이어야 한다.

버전 일치 확인은 npm ls react-dom 혹은 npm ls react-native 명령어로 확인할 수 있다. (yarn은 list이다.)

해결 방법

만일 문제가 생겼다면, 위와 같은 사항들을 잘 살펴보자. 아마 대다수 기본적으로 지키는 원칙이라고 생각한다.. 나 또한 그랬다.

결론적으로, 나에게 발생한 문제의 원인은 분리한 api 파일에서 useState를 사용한 것이었다.

사용하지도 않는 useState... useState를 삭제하니 자동으로 문제가 해결됐다!
당연하게도.. 원인은 함수형 컴포넌트가 아닌 일반 함수이기 때문이었다. 이런 기초적인 걸로 골머리를 앓는 바보같은 짓을 하게 되었다!!!

혹시 모든 게 완벽한데 되지 않는다면, 이상한 위치에 use.. 로 시작하는 hook이 있지는 않은지 확인해보자.