클린업에 대해 궁금한 점이 있습니다!

실전 리액트 프로그래밍

useEffect 실전 활용법2

작성

433

예제를 보면 useEffect를 사용해서 등록된 이벤트 리스너addEventListener(), removeEventListener()를 클린업 해주는데, 이렇게 처리하는 이유가 궁금합니다.

또 리엑트에서는 왜 클린업을 해줘야 하는건가요?

react redux

답변 2

이재승

지식공유자

안녕하세요
useEffect 는 deps 배열의 내용이 변경될 때마다 함수를 호출하고, 그 만큼 addEventListener 가 호출되면서 브라우저가 호출해야하는 함수의 갯수도 늘어납니다

아래 코드는 value 가 변경될 때마다 addEventListener 로 새로운 함수를 입력하고 있습니다
value 가 1 => 2 => 3 순서로 변경됐다고 가정하면,
스크롤 시 우리가 원하는 결과는 콘솔 로그에 3이 출력되는 것일 텐데요
하지만 removeEventListener 를 호출하지 않아서 1, 2, 3 이 각각 출력될 겁니다

  useEffect(() => {
    addEventListener('scroll', () => console.log(value));
  }, [value]);

wjdxor133

질문자

친절한 답변 감사합니다! 🙏🏻

그렇다면 쓸데없는 함수 호출을 막기 위해서 클린업을 해주는거라고 생각하면 되는 건가요?!

이재승

지식공유자

안쓰는 함수를 listener 에서 제외한다고 생각하시면 될 것 같아요
호출을 막기 위한 것 외에도 안쓰는 함수를 제외하지 않으면 (필요 없는데도) 메모리에서 해제가 안되는 문제도 있을 수 있습니다

인프런 커뮤니티 질문&답변

클린업에 대해 궁금한 점이 있습니다!