[react] hook 에서 componentDidMount, componentWillUnmount 기능 구현하기

 

react가 16.8 버전에서 hooks이 추가되면서 useEffect를 사용하면 라이프사이클의 다음을 대체한다.

componentDidMount, componentDidUpdate, componentWillUnmount

 

그럼 다음 샘플을 보면서 간단히 알아보자

...
    useEffect(() => {
        console.log("컴포넌트 시작")
        
        return () => {
            console.log("컴포넌트 종료 ")
        }
    }, [])
...

 

감지 부분을 빈상태([]) 로 두면 처음 componentDidMount와 비슷한 기능을 한다. 그래서 이 컴포넌트를 호출하면 로그를 다음과 같이 보여준다.

 

return을 사용하면 componentWillUnmount 와 같은 기능을 한다

컴포넌트가 종료되면 설정한 로그를 표시해준다.

 

 

끝.