Useeffect hook의 리턴구문 실행 조건

useeffect hook은 의존성 배열을 이용하여 리렌더링을 제어할 수 있어 컴포넌트의 불필요한 렌더링을 막을 수 있고 콜백함수를 리액트의 라이프사이클과 동기화 시킬수 있어 널리 사용되는 hook이다. 또한 리턴구문이 컴포넌트가 언마운되거나 리렌더링 직전에 실행되는 것을 이용하여 리소스를 정리할때도 편리하게 사용할 수 있다.

 

이때 useeffect hook의 의존성배열 유무에 따라 리턴구문 실행여부가 달라지는데 먼저 의존성 배열이 존재하는 경우 , 빈 배열이 아닌 경우, useeffect hook의 콜백함수는 컴포넌트가 마운트 되고 의존성 배열의 값이 바뀔때마다 실행된다. 리턴 함수는 컴포넌트가 언마운트될때, 페이지에서 사라지거나 페이지가 이동할 때, 실행되고 의존성 배열의 값들이 바뀔때 실행된다.

 

의존성배열이 빈 배열인 경우 의존성 배열의 값들이 바뀔일이 없기때문에 컴포넌트가 언마운트 될때만 실행된다.

 

useeffect(()=>{
	console.log(mounted);
	return () => {
    	console.log("unmounted");
    	}
    }
, [])

예를 들어 다음과 같은 코드에서 컴포넌트가 처음 마운트 될 때 console에는 mounted라는 log가 찍힐 것이고 unmounted라는 log는 컴포넌트가 언마운트 된후에만 실행될 것이다.