[ReactHooks] lifecycle, useEffect

1. lifecycle

 

React의 class는 위의 사진처럼 lifecycle을 갖는다.

 

reder가 실행되고 그후 componentDidMount()가 실행된다.

단 그후 같은 setState로는 rerender가 일어날시 componentDidMount()는 일어나지 않는다.

 

componentWillUnmount 는 컴포넌트가 제거되기 직전일어난다.

 

 

2. useEffect

함수형은 위의 lifecycle를 이용하지 못한다. 그래서 대신 이용하는것이 useEffect이다.

useEffect( ()=>{ //componentDidMount, componentDidUpdate 역할(1대1 대응은 아님)
    return () =>{ //componentWillUnmount 역할
    }
},[]);

위의 형식으로 사용한다.

 

useEffect을 통해서 componentDidMount, componentDidUpdate의 역활을 대체할 수 있다.

 

또한 return을 통해서componentWillUnmount의 역활을 대체할 수 있다.

 

2번째 인자로 배열 형태임, 배열 안에는 검사하고자 하는 특정 값을 넣는다.