useEffect의 clean up 함수를 실행해야 하는 이유가 ... - 인프런

Next.js 시작하기(feat. 지도 서비스 개발)

next/script로 네이버 지도 불러오기

useEffect의 clean up 함수를 실행해야 하는 이유가 무엇일까요??

해결된 질문

작성

568

안녕하세요 강사님!

유익한 강의 아주 잘 듣고 있습니다.

혹시 컴포넌트 unmount 시 맵 객체를 destroy 해야 하는 이유를 알 수 있을까요?

destroy를 하지 않아도 코드 동작에는 큰 문제가 없는 것 같습니다. 혹시 메모리 상의 문제나 다른 문제가 있어서 이 코드를 작성해야 하는걸까요??

next/script로 네이버 지도 불러오기 강의 (8:40)

useEffect(() => {
    return () => {
      mapRef.current?.destroy();
    }
  })

예를 들면, setInterval의 경우 Unmount시 clearInterval을 하지 않을 경우 계속 백그라운드에서 실행되기 때문에 clearInterval을 해줘야한다고 바로 이해가 됐습니다. 하지만 위의 경우 꼭 맵 객체를 destroy 해야하는걸까요??

seo next.js vercel csr ssg ssr

답변 1

박용주

지식공유자

안녕하세요! 질문 감사합니다 :)

말씀하신대로 이 프로젝트에서는 "한 페이지 안에서 여러 번 지도를 추가 OR 삭제하는 동작"은 없기 때문에, destroy를 안해도 기능상 큰 문제는 없습니다.

공식문서에서 destroy() 는 모든 이벤트 및 지도 요소를 제거한다고 설명되어 있습니다(https://navermaps.github.io/maps.js.ncp/docs/naver.maps.Map.html#destroy__anchor).

destroy를 지우고 빌드한 후 개발자도구의 performance 테스트를 해보면, 실제로 memory leak이 발생하는 것을 확인할 수 있습니다.
-> destroy()를 실행할 경우 '/' 페이지와 '/feedback' 페이지를 왔다갔다해도 listeners 수(노란색 선)가 똑같이 하락합니다.(노란선이 빨간선과 겹치도록 바닥에 붙어있음)