[React] 함수형 컴포넌트에서 라이프사이클 관리

Hooks에서는 useEffect를 통해 lifeCycle을 관리한다.

useEffect는 클래스기반 라이프사이클 메소드에서 

componentDidMount, componentDidUpdate, componentWillUnmount 세가지 역할을 할 수 있다.

 

*ComponentDidUpdate , getDerivedStateFromProps

useEffect는 컴포넌트가 마운트된 후, 업데이트 된 후, 언마운트 되기 전 모두 실행된다.

이 때, 조건에 특정 state 혹은 props를 전달하면 해당 값이 변할 때만 useEffect가 실행된다.

따라서 이는 componentDidUpdate와 getDerivedStateFromProps와 같은 역할이다.

 

* ComponentDidMount

useEffect의 두번째 파라미터로 빈 배열만 넣게 되면 useEffect는 컴포넌트 마운트시에만 실행된다.

이는 componentDidMount와 같은 역할이다.

 

* ComponentWillUnmount

componentWillUnmount의 역할은 clean-up 함수를 통해 구현할 수 있다.

컴포넌트가 언마운트 될 때 정리하거나 해제해야 할것이 있다면 useEffect의 return 값으로 전달한다.