슬라이더 라이브러리 Swiper를 조작하려고 useRef()를 쓰려는데, 예상치 못한 에러가 미친듯이 발생한다;;
Unhandled Runtime Error
Error: Invalid hook call. 이라면서 Hooks가 잘못 호출되고 있다는 거다..
터미널에선
error TypeError: Cannot read properties of null (reading 'useRef')
라며 타입에러라고도 내뱉고 있었다.
원인을 계속 못 찾던 중.. hooks 호출이 잘못됐다니까 순서를 바꿔볼까..? 하는 마음에 랜더 순서 가장 상위로 올렸다
useRef 호출하는 코드를 위로 올렸더니 잘 돌아간다.
혹시나해서 테스트겸 다른 코드도 위에 추가해봤는데 다른건 괜찮다. 저 언어팩 호출하는 놈이 문제였던 듯 하다.
i18n 언어팩 호출하는 useTranslation 이 부분이 useRef() 보다 먼저 나오면 에러를 내뱉음
원인은 async 구문 내에서 await 함수보다 나중에 불러와졌기 때문이다.
react hooks는 항상 함수 최상단에서 가장 먼저 불러와져야 한다고 설명되어진다. 특히 useRef 는 DOM 요소에 대한 참조를 생성하는데, 그 전에 언어팩을 불러오는 비동기 함수가 호출되면서 타이밍에 따른 에러로 보여진다.
일단 내 생각에는 그러한데, 보다 명확한 설명을 찾을 길이 없어 조금 답답하다.. 누군가 확실한 설명을 해주면 참 좋으련만 ㅠㅠ
그래도 오늘 배운 점, async await 구문 내에서 useRef는 무조건 가장 위에 둘 것!!!
