페이지가 자꾸 무한 렌더링이 되는 오류가 났다..
이 오류를 찾기 위해 .. 전 코드를 주석 처리하고 하나하나 찾아내는 번거로움을 거쳤다ㅠ..
렌더링 확인 방법 (React Developer Tools)
렌더링이 될 때마다 노란 박스로 표시해주는 확장 프로그램이 있다.
React Developer Tools 라는 확장 프로그램이다.
개발자 도구의 Componenets setting에 들어간다.
여기서 Highlight 박스를 체크 하면 렌더링 여부를 체크할 수 있다!
무한 렌더링 오류
보다싶이 무한으로 렌더링이 되고 있다 ......
이렇게 되면 트래픽 사용량이 많아져서 서버가 다운될 수 있으니 잡아주고 가야한다!
하나하나 주석처리해서 찾아본 결과 ...
계정 조회시 활용했던 코드가 문제였다.
queryClient.invalidateQueries("profile") 는 초기화해서 다시 렌더링시켜주는 코드다.
그런데 profile 을 초기화했는데 다시 profile 을 뿌려주게 되니
무한으로 렌더링이 될 수 밖에 없었던 것이다 ㅠㅠ..
깔끔하게 지워주자 무한렌더링 오류가 잡혔다 ! 참고해서 코드를 짜도록 해야겠다 !
