[React] 뒷정리하기 - useEffect

useEffect는 기본적으로 렌더링되고 난 직후마다 실행되며 두번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라집니다.

언마운트 되기 전이나 업데이트 되기 직전

컴포넌트가 언마운트 되기 전이나 업데이트 되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리(cleanup) 함수를 반환해 주어야 합니다.

📒 info.js

useEffect(() => {
	console.log('effect');
    console.log(name);
    return () => {
    	console.log('cleanup');
        console.log(name);
    };
},[name])

렌더링될 때마다 뒷정리 함수가 계속 나타나는 것을 확인할 수 있습니다. 그리고 뒷정리 함수가 호출될 때는 업데이트 되기 직전의 값을 보여 줍니다.

언마운트 될 때만

오직 언마운트 될 때만 뒷정리 함수를 호출하고 싶다면 useEffect 함수의 두번째 파라미터에 비어 있는 배열을 넣으면 됩니다.

📒 info.js

useEffect(() => {
	console.log('effect');
    return () => {
    	console.log('unmount');
    };
},[])