useEffect 에서 return 문을 왜 쓰이는걸까?

✔️ useEffect 는 html 이 모두 렌더링 된 후 실행된다.

✔️ useEffect는 기본적으로 매 렌더링마다 실행되며. 만약에 dependency가 없다면 컴포넌트가 마운트되고, 업데이트될때마다 useEffect()가 실행된다. 따라서 두번째 인자로 [ ] 를 적어주면 해당 부분이 랜더링 될때만 useEffect 가 실행된다.

useEffect(() => {
    document.addEventListener("mouseleave", handle);
    return ()=> document.removeEventListener("mouseleave", handle)
  }, []);

📌 그렇다면 useEffect 속 return 문은 무엇일까?

❗️useEffect에서 return 의 의미는 useEffect가 실행되기 전 return 안에 있는 함수를 실행시켜달라 라는 의미이다.

     해당 return 다음에 나오는 함수를 cleaning function(청소함수)라고도 부른다.

     이렇게 하는 이유는 실수로라도 useEffect 함수의 내용이 중첩으로 적용되면 후에 버그를 일으키기 때문이다.

     그래서 useEffect 실행전 이벤트를 지우고 다시 등록하는 작업을 하게된다.