리액트 warning : Cannot update a component (``) while rendering a different component (``). To locate the bad setState() call inside ``, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

불 - 편

 



일단 결론부터 말하자면 https://github.com/facebook/react/issues/18178#issuecomment-595846312 해당 주소로 접속하면 문제가 있는 코드를 탐색하는 방법을 안내하고 있다.

 

앞에 react- 어쩌고 저쩌고 표기되어 있으면 그냥 정상 코드, 붙어있지 않은 친구들이 문제 있는 아이들이니 확인해주면 된다.

해당 글을 대략적으로 읽어봤는데 v16부터 추가된 경고 메세지이며 당장 문제를 발생시키지는 않지만 어떤 방법을 사용해도 해당 경고 메세지를 제거할 수 없다면 추후 호환에 문제가 될 수 있으니 리액트 v15를 사용할 것을 권고하고 있다.

물론 지금은 이미 리액트 v18까지 나온 상태이니 옛날 얘기다.

 

나의 경우 event.js는 확인해보니 emitter에 관한 코드가 적혀 있었는데.. 이건 찾아보니 node.js와 관련된 부분인데 관련 지식이 전혀 없으니 구글을 찾아봐도 무슨 말인지 모르겠어서 아이고.. 에러 해결하려면 node를 공부해야 하는 건가? 라고 생각하다가 밑에 혼자 다른 이름을 가진 hooks.tsx를 눌러봤다.

 

들어가보니 react-router-dom v6의 navigate 함수가 있었다. hooks.tsx:185 부분을 읽어서 유추할 수 있는건 마땅히 없었지만 내가 라우터로 페이지 이동하는 단계에서 뭔가 잘못 설정했구나 생각하고 react-router-dom 공식 문서에서 navigate 함수 사용 방법을 다시 읽어봤다.

 

v5까지는 history.push("/절대경로") 이렇게 코드를 작성했었는데, v6부터는 navigate("./상대경로")라고 코드를 작성하는 것으로 변경되었다고 한다. 똑바로 읽어보지 않고 navigate("/절대경로")라고 작성한 것이 문제였다. 상대경로로 변경하니 경고 메세지가 사라졌다.