React의 useEffect

MPR·2019년 12월 2일

useEffect가 단순히 React의 lifecycle을 대체하기 위한 기능의 메소드는 아니지만 단순히 function components에서 lifecycle을 구현하기 위해 useEffect를 사용할 경우를 위해 케이스를 정리한 글입니다.

1. 마운트되었을 때 그리고 리렌더링되었을 때

useEffect(() => console.log('Mount && change'));

2. 마운트되었을 때 (=== componentDidMount)

useEffect(() => console.log('Mount'), []);

3. 마운트되었을 때 && 두번째 파라미터로 넘긴 값이 변경 되었을 때

useEffect(() => console.log('Mount & Change of second parameter'), [state, porps]);

4. 언마운트되었을 때, 리렌더링되었을 때

useEffect(() => () => console.log('Unmount &&  change'));

5. 언마운트되었을 때 === componentDidUnmount

useEffect(() => () => console.log('Unmount'), []);

6. 언마운트되었을 때 && 두번째 파라미터로 넘긴 값이 변경 되었을 때

useEffect(() => () => console.log('Unmount'), [state, porps]);

7. 마운트되었을때와 언마운트되었을때 그리고 리렌더링되었을 때

마운트 되었을때는 console.log(‘Mount’);만 실행되고 언마운트되었을때는 console.log('Clear');만 실행된다. 그리고 리렌더링 되었을 때는 먼저 console.log('Clear');를 실행하고 console.log('Mount’);를 실행한다. 즉, 클리어를 먼저 실행한 후 마운트 코드를 실행한다.

useEffect(() => {
    console.log('Mount');
    return () => console.log('Clear');
});

8. 마운트되었을 때와 언마운트되었을 때

useEffect(() => {
    console.log('Mount’); // === componentDidMount
    return () => console.log('Clear’); // === componentDidUnmount
}, []);

9. 기본적으로 7번과 동일하지만 두번째 파라미터로 넘긴 값이 변경되었을 때만 console.log(‘Clear');을 실행한다.

useEffect(() => {
    console.log('Mount');
    return () => console.log('Clear');
}, [state, porps]);

MPR