useEffect의 mount와 unmount

 

 

  React에는 생명주기라는 것이 있다. 컴포넌트가 랜더링이 시작되는 지점부터 랜더링이 끝나는 지점을 생명주기라고 한다. 여기서 랜더링이 시작되는 지점을 mount되는 지점이라고 부르고 랜더링이 끝나는 지점을 unmount되는 지점이라고 부른다.

  이 지점을 Class로 React를 구성하면 mount의 시점은 componentDidMount() {}로 unmount때는 componentWillUnmount() {}로 시점에 접근할 수 있다. 이를 활용하여 전처리와 후처리를 할 수 있다.

  그러나 Function형으로 React를 구성하면 위의 메소드가 존재하지 않는다. Function형에서는 Hook을 사용하기 때문이다. Hook을 사용하여 mount와 unmount의 지점에 접근할 때는 useEffect를 사용한다. useEffect에 의존성 빈배열을 활용하면 mount지점에 접근할 수 있다.

useEffect(() => {
	console.log('mount')
}, [])

이렇게 하면 mount되는 지점에서 'mount'라는 문자열을 콘솔창에 출력한다. unmount 지점에 접근할 때는 콜백을 활용한다.

unEffect(() => {
	reuturn () => {
    	console.log('unmount')
    }
}, [])

이렇게 콜백을 사용하면 unmount되는 지점에 'unmount'라는 문자열을 콘솔에 출력한다. 

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

당연히 위와 같이 사용하면 마운트 되는 지점에서 'mount'를 언마운트되는 지점에 'unmount'를 출력한다.