UseEffect 안에 return 은 언제 실행될까?

UseEffect 안의 return 은 cleanup 역할을 한다.
즉, useEffect 가 재실행 될때 기존에 존재하던 로직을 cleanup 할 수 있거나, 특정 코드를 실행시킬 수 있다.

useEffect(() => {
  // some logic
  
  function cleanUp() {
    console.log('cleanUp');
  };
  // cleanUp 함수를 리턴한다.
  // 리액트는 상태를 업데이트 하기전 or unMount 하기 전에 cleanUp 함수를 실행시킨다.
  return cleanUp;
}, []);

실무에서 useEffect 의 cleanUp 함수가 단지 componentWillUnmount 에만 실행되는건지 아는 사람이 있다.
하지만, dependency 가 바뀌면서 useEffect 내부가 재실행되기 전에도 cleanUp 함수가 실행된다.

따라서 아래 코드는 문제가 없다!

useEffect(() => {
  window.addEventListener(....);
  
  
  return () => {
    window.removeEventListenr(...);
  };
}, [idx]);

추가적으로...
크롬에서 지원하는 아래 메서드로써 특정 DOM 에 등록된 이벤트리스너를 알 수 있다.
codeSandBox 에서는 테스트하고 있는 dom 을 개발자도구에서 한번 inspect 한 뒤에 코드를 실행시키면된다.

getEventListners(DOM);