잘못된 후크 호출: React 구성 요소 구성의 충돌 해결

후크가 외부에서 호출될 때 React에서 "잘못된 후크 호출" 오류가 발생합니다. 함수 구성요소의 범위. 이 문제는 다양한 이유로 발생할 수 있습니다.

잠재적인 원인 중 하나는 React 버전과 React DOM과 같은 렌더러 간의 불일치입니다. 이 문제를 해결하려면 호환 가능한 버전을 사용하고 있는지 확인하세요.

또 다른 가능성은 후크가 함수 구성 요소의 본문 내에서만 사용될 수 있다고 규정하는 후크 규칙을 위반하는 것입니다. React 코드의 예측 가능성과 일관성을 유지하려면 이 규칙을 준수하는 것이 중요합니다.

마지막으로, 동일한 애플리케이션 내에 React의 여러 인스턴스가 있으면 후크 호출 충돌이 발생할 수 있습니다. 이 경우 올바른 소스에서 React를 가져오고 있는지 확인하고 여러 복사본을 로드하지 마십시오.

제공된 코드 예제의 경우 Material-UI의 makestyles 후크를 사용하려고 할 때 오류가 발생했습니다. (const useStyles = makeStyles(theme => ({ ... }))로 주석 처리됨) 이 문제를 해결하려면 수당 구성 요소를 기능적 구성 요소로 리팩터링해야 합니다.

또는 다음과 같은 경우 npm 링크를 사용하여 로컬 라이브러리를 설치하는 개발 중에 이 오류가 발생하면 주어진 답변에 설명된 솔루션이 효과적인 것으로 입증됩니다. 애플리케이션의 React 인스턴스와 라이브러리의 인스턴스 사이에 링크를 설정하면 버전 충돌을 제거하고 성공적으로 사용할 수 있습니다. 지역 도서관 내의 후크.