오랜만에 블로그를 남기네요 이번주는 회사에서 react-table 관련 주제로 공부를 하느라 좀 늦었는데 react-table을 공식문서를 읽어가며 사용하다가 멘탈이 나간 주제가 있었습니다. 그것은 바로바로...
해당 에러인데요 react hook 규칙을 위반했다! 라고 적혀있습니다. 해당 에러는 제가 react 기초를 공부할때 가끔 보았던 에러인데요 공식문서에 해당 에러를 검색해보면
공식 문서에 이렇게 조건부 랜더링을 훅 위에 사용하지 말라고 돼있습니다 이 말이 무슨뜻이냐면 간단히 말해서 hook 호출을 하고 return( 랜더링 되는 부분) 에 사용하라는 것인데요 그래서 vsCode를 키고 제 코드를 확인해보았습니다.
ㅋㅋㅋㅋ 이럴수가 이렇게 돼있지 뭐에요 당연히 projcetList가 있어야 데이터를 넣어야 한다고 생각했던 부분에 이렇게 짜여졌던 것 같아요 항상 공부만 했다가 실제로 발생하는 에러를 보니 멘붕이 왔지 뭡니까 확실히 아직은 주니어 개발자 인것을 뼈저리게 느꼈습니다. 그래서 해당 조건부 랜더링을 훅 밑으로 내리고
이렇게 하여 해결하였습니다!. 하지만 이렇게 해도 오류가 나서 1시간 머리를 잡았는데 vsCode 껏다키니 해결했었어요 여러분들도 만약 react hook 규칙을 위배 하셨다면 당황하지 말고 조건부 랜더링을 달았나 확인 해보시기 바랍니다. 모두 개발 화이팅이에요!
'개발' 카테고리의 다른 글
| [알고리즘] 프로그래머스 직사각형 별찍기 (0) | 2025.03.12 |
|---|---|
| 브라우저의 sessionStorage와 localStorage (0) | 2025.03.09 |
| 기존 바닐라Js와 React의 가장 차이점은 뭘까? (1) | 2025.02.28 |
| 웹 브라우저의 렌더링을 자세히 알아보자. (0) | 2025.02.28 |
| React의 탄생 계기와 작동 방식에 대해 알아보자. (0) | 2025.02.27 |