문제가 생긴 애플리케이션. GC를 수동으로 실행했음에도 Heap메모리가 줄어들지 않는다. summary를 보니 JS arrays 부분이 과도하게 많다.
다른 웹 애플리케이션. 파란 곡선이 증가하다가 뚝 떨어진다.
searchRoutes.tsx의 232 행 forEach 함수를 확인해 보았다. 해당 함수는 지도 이동, 지도 확대, 축소 이벤트가 일어날 때마다 몇 만번의 forEach반복문을 돌았다. 비효율적인 기능이지만 참조를 잘 못하는것 같지는 않았기에 메모리 누수의 원인은 아닌것 같았다.
초록색 한 부분이 지도가 랜더링 된 DOM인데, useEffect 내부에서 랜더링을 하고 있었다. 지도 위에 마커들을 띄우기 위해 카카오 map객체를 사용해야 했고, 같은 useEffect함수 내에서 처리했었다. 문제는 state가 바뀔 때마다 useEffect함수가 실행돼, 전에 랜더링 되었던 지도는 그대로 남고, 새로 랜더링이 되고 있었다. 이 과정이 계속 반복되어 위 사진과 같이 지도가 그려진 DOM이 계속 생성되었고, 메모리 문제가 발생했다.
참조
https://yceffort.kr/2020/07/memory-leaks-in-javascript#%EB%91%90-%EA%B0%9C%EC%9D%98-%EC%8A%A4%EB%83%85%EC%83%B7-%EC%B0%8D%EA%B8%B0
https://devtalk.kakao.com/t/topic/106470