React Hook 에러

React hook 을 사용하다보면 아래와 같은 에러 문구를 마주칠때가 있다.
useEffect 뿐만 아니라 useMemo, useCallback 등 마찬가지로 문제가 발생하는데

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

에러 문구를 살펴보니 useEffect 는 컴포넌트의 매 렌더링마다 동일한 순서로 호출되어야 한다는 의미이다.
이 말이 무슨말인고 하니 예를들어 아래와 같이 if 문에 따라 useEffect 훅이 조건부로 호출되므로 이를 허용하지 않는다는 뜻이다.

if(isPending) return <div>Loading...</div>

useEffect(() => {
	/// 어떠한 로직
},[])

해결 방법은 매우 간단한데, 아래와 같이 순서를 바꿔주면 된다.
useEffect 훅을 if 조건부보다 위로 올림으로써 훅이 렌더링마다 동일한 순서로 호출되도록 보장해주면 된다.

useEffect(() => {
	/// 어떠한 로직
},[])

if(isPending) return <div>Loading...</div>