1. 개요

React 컴포넌트가 렌더링 될 때마다 특정 작업(effect)을 실행할 수 있도록 하는 hook이다. component가 mount,update,unmount됐을 때 작업을 처리할 수 있다. useEffect는 네가지 메소드(componentDidMount, componentDidUpdate, componentWillUnmount, getDerivedStateFromProps)의 기능을 모두 수헹한다.

1.useEffect(callBackFunc);

2.useEffect(callBackFunc, []);

3.useEffect(callBackFunc, [state1, state2]);

4.useEffect(()=>{ return(() => func()) });

1의 경우 렌더링이 될 때마다 (컴포넌트가 마운트 된 후, 컴포넌트가 업데이트되고 난 후, 컴포넌트가 언마운트 되기 전에) 실행이된다.즉, 앞서 말한 생명주기 메소드의 네가지의 메소드를 모두 사용한 것과 마찬가지이다.

2의 경우 컴포넌트가 최초 렌더링 되었을 때만 실행이 된다.즉, 생명주기 메소드의 ComponentDidMount 의 역할을 수행한다.

3의 경우 최초 렌더링 , state1 또는 state2가 변경되었을 때 실행이 된다.즉, 생명주기 메소드의 componentDidUpdate, getDerivedStateFromProps 의 역할을 수행한다.

4의 useEffect는 clean-up이라고 표현하는 함수를 return할 수 있는데, clean-up함수(리턴하는 함수)를 활용해 컴포넌트가 Unmount될 때 정리하거나 unscribe 해야할 것을 처리한다.즉, clean-up함수는 생명주기 메소드의 componentWillUnmount의 역할을 수행한다.

useEffect로 전달된 함수는

컴포넌트 렌더링 ⇒ 화면 업데이트 ⇒ useEffect 실행

순으로 실행이 된다. 즉, useEffect는 실행이 최초 렌더링 이후에 된다는 것을 유의하자.

만약 화면을 다 그리기 이전에 동기화 되어야 하는 경우에는, useLayoutEffect()를 활용하여