React hooks에서 componentWillUnmount 구현

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

 

array dependency를 [ ] 빈 상태로 두면 => componentDidMount와 비슷한 기능을 한다.

컴포넌트를 호출하면 => '컴포넌트 시작' 이 출력된다.

 

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

컴포넌트가 종료되면 => '컴포넌트 종료'를 출력한다.

 

 

여기서, componentWillUnmount란?)

컴포넌트가 소멸된 시점에(DOM에서 삭제된 후) 실행되는 메소드다.
컴포넌트 내부에서 타이머나 비동기 API를 사용하고 있을 때, 이를 제거하기에 유용하다.