React에서는 React 웹 어플리케이션이 실행(MOUNT)~종료(UNMOUNT)까지의 과정을 나누어서 컨트롤이 가능하다.
constructor ➡ componentWillMount ➡ componentDidMount ➡ componentWillUnmount
이 라이프 사이클에서 컴포넌트 갱신은 componentWillMount 과 componentDidMount이 담당한다.
HOOKs에서는 useEffect가 라이프 사이클을 관리한다.
useEffect의 파라미터는 아래와 같다.
useEffect(<function>, <Array>);function은 컴포넌트가 render 또는 re-render 되었을때 실행하고 싶은 콜백 함수를 의미.
array는 어떤 state가 변화 되었을때 컴포넌트를 re-render 할지에 대한 dependency를 적는다.
array이에 빈 브라켓으로 넣어 준다면 처음 렌더 이후 어떠한 state를 변경 하더라도 컴포넌트를 re-render하지 않겠다라는 의미 이다.
array 파라미터에 빈 브라켓 조차 넣지 않는다면, 단지 componentDidMount의 역할을 수행한다.
그렇다면 componentWillUnmount는 useEffect 에서 어떻게 작성해야 할까?
useEffect(() => {
console.log('effect');
console.log(name);
return () => {
console.log('cleanup');
console.log(name);
};
}); useEffect의 리턴 함수를 사용한다.
여기서 중요한 것은 실제 동작 순서이다.
1. props나 state가 업데이트
2. 컴포넌트 리렌더링
3. 이전 이펙트 클린업
4. 새로운 이펙트 실행
즉, 컴포넌트를 리렌더링 하기 전에 클린업 되는게 아니라 리렌더링 후 다음에 클린업이 되며 새로운 이펙트가 실행된다.
이전 이펙트 클린업 -> 리렌더링 -> 이펙트 실행 X
리렌더링 -> 이전 이펙트 클린업 -> 이펙트 실행 O
이전 이펙트 클린업 함수는 이전의 props 또는 state를 보고 있다 그이유는 클로저때문이다.
