현재 진행 중인 React 프로젝트를 하던 중 이런 에러를 만났다.

왜 발생하는가?

• 조건문 내에서 hook 호출

• 반복문이나 함수 내에서 hook 호출

• 렌더링 중에 동적으로 hook을 추가하거나 제거

  자세히 보면 공통점이 있고 이를 해결할 방법도 간단하다.
  React를 이용해서 개발을 하다보면 자주 쓰이는 코드는 재사용성을 높이기 위해 customhook을 만들고 main에서 호출해 사용한다.

  호출을 할 때 위의 발생 사례들을 보면 hook은 항상 컴포넌트의 최상위 레벨 에서 호출되어야 하고, 어떠한 특정 부분에 들어가 선택적으로 호출되어서는 안된다는 걸 알 수 있다.

const component = () => {
	if(condition) {
    	useState(0); //여기서 호출하면 안됨. (조건문)
    }
 
}

해결 방법

해결 방법은 위에서 발생했던 원인을 생각해보면 간단하다.

• hook을 조건문 밖으로 이동
• hook을 최상위 레벨에서 호출
  이렇게 함으로써 항상 동일한 순서로 호출 되도록 하게 한다.