발생한 에러
코드를 수정하다 일부 변경 사항이 생길때 마다 아래와 같은 에러가 발생했다. 새로고침하면
에러가 다시 사라지지만 코드를 일부 수정할 때 마다 이러한 에러가 종종 발생해서 찾아보니 Vite에서 Context API를 사용할 때 발생하는 문제였다.
커스텀 훅 이름 must be used within ~Provider
에러의 원인
React에서 Context와 Context의 Provider를 같은 파일 내에서 작성하면 에러가 발생한다고 한다.
따라서 Context를 별도로 파일을 생성하여 import하여 ContextProvider를 사용하면 된다.
🔗 Reference
Vite HMR 에러 (feat. ContextAPI)
Fixing Vite HMR Issues
