React Hooks - (2) useEffect, useLayoutEffect

useEffect는 componentDidMount, componentDidUpdate, componentWillUnmount 와 비슷하다.

3가지 경우를 전부 포함하는 느낌이다.

 

componentDidMount 역할을 해서 새로고침하면 호출되고,

componentDidUpdate 역할을 해서 새로 렌더링 되어도 호출된다.

 

useEffect는 2개의 인자를 받는데 첫 번째는 function으로써의 effect이다.

두 번째 인자는 dependency이다. 만약 deps가 있다면 effect는 deps리스트에 있는 값일 때만 값이 변하도록 활성화될 것이다.

 

 

dependency는 componentDidUpdate의 호출을 제어하고 싶을 때 사용한다.

자세한 예시는 아래와 같다.

useEffect(function) // 업데이트할 때마다 function이 호출됨
useEffect(function, []) // 업데이트를 아무리 해도 function은 호출되지 않음. 처음 마운트 될 때만 호출
useEffect(function, [number123]) // number123이 업데이트 될 경우만 업데이트가 호출됨

 

 

 

useLayoutEffect

모든 그래픽이 렌더링 된 후 실행된다는 점만 빼고는 useEffect와 같다.