[React] Clean up Effect
Clean up Effect
1. Cleanup 함수
페이지를 벗어났을 때 이벤트 리스너는 더 이상 필요없어질 수 있습니다. 이러할 경우엔 Effect를 정리해줘야 합니다. 이 때마다 Cleanup Effect를 일으킬 수 있도록 useEffect 안에 해당 로직을 정리하는 동작을 정의해두면 됩니다.
Cleanup 함수란, useEffect()에서의 return 함수입니다.
🙋♀️ 원래 함수에 return이 있는 거 아닌가요? return 함수 그게 뭐죠?
첫번째 예시를 보면,
useEffect(() => {
function handleScroll() {
console.log(window.scrollY)
}
document.addEventListener("scroll", handleScroll)
return () => {
document.removeEventLisnter("scroll", handleScroll)
}
}, [])
useEffect 함수 안에 return 함수가 있는 걸 볼 수 있습니다. 이런 식으로 useEffect 함수 안에 return함수를 추가하여 cleanup 함수를 사용할 수 있습니다.
return () => {}; //cleanup 함수는 이렇게 쓸 수 있습니다.
사용자가 현재 페이지에서 다른 페이지로 넘어갔을 때 useEffect가 실행되지 않도록 합니다.
🙋♂️useEffect함수와 Clean up 함수의 동작 원리를 알고 싶어요.
두번째 예시를 보면,
useEffect(() => {
console.log("effect");
return () => {
console.log("cleanup effect");
};
});
1. 처음에 페이지가 렌더링될 때 (mount될 때)
console에는 useeffect 함수의 console만 찍히게 됩니다.
2. state 값을 변경했을 때 (예를 들어 버튼 클릭)
console에는 cleanup 함수의 console이 먼저 찍히고 useEffect 함수의 console이 찍히게 됩니다.
useEffect를 실행하기 전에 cleanup함수를 실행시키고 그 다음에 useEffect함수를 실행시킵니다.
state를 변경하면,
cleanup함수 -> useEffect함수 실행 이 cycle로 동작합니다.
3. 다른 페이지로 넘어가서 unmount될 때
cleanup 함수가 한 번 실행되고 기존의 이펙트 함수는 실행되지 않습니다.
** 주의할 점
단순히 컴포넌트가 생성되고, 사라지는 시점에만 Cleanup Effect가 실행되는 건 아니라는 겁니다. 다음 Effect가 일어나기 전에, 이전 Effect의 영향을 정리해줘야 한다는 컨셉을 꼭 기억해주세요.🤩
Author And Source
이 문제에 관하여([React] Clean up Effect), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@memoyoon/React-Clean-up-Effect저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)