[React] React Hooks : 3. useEffect

React의 클래스형 컴포넌트 생명주기

 

1. useEffect란?

클래스형 컴포넌트의 경우 componentDidMount → componentDidUpdate → componentWillUnMount로 사용되던 것을 

함수형 컴포넌트에서는 useEffect를 통해 구현할 수 있다.

 

2. useEffect 초기 선언

import React, { useEffect } from 'react';

 

3. 모든 컴포넌트가 리렌더링 될 때마다 실행하기

메모리가 과다 사용되므로 추천하지 않습니다.

useEffect(() => {
    console.log('모든 컴포넌트가 리렌더링 될 때마다 실행됩니다.');
});

 

4. 컴포넌트가 렌더링 된 이후 한 번만 실행하기

렌더링이 완료된 후 호출되며, 빈 배열을 종속시켜 한 번만 실행되도록 한다.

클래스형 컴포넌트의 componentDidMount()와 유사.

useEffect(() => {
    console.log('컴포넌트의 첫 번째 렌더링 시 한 번 실행됩니다.');
}, []); // 빈 배열을 줌으로서 1회만 실행

 

5. 특정 상태가 변경될 때마다 실행하기

ex) value 값이 변경될 때마다 console창에 "value 값이 변경되었습니다." 뜸.

클래스형 컴포넌트의 componentDidUpdate(), getDerivedStateFromProps()와 유사.

useEffect(() => {
	console.log("value 값이 변경되었습니다.");
}, [value]); // value라는 상태값이 변경될 때마다 실행됨

 

5-1. 여러 변수가 변경될 때마다 useEffect Hook이 실행되도록 할 때

ex) value1, value2, value3이 각각 변경될 때마다 Hook이 실행됨

 useEffect(() => {
    console.log("value1, value2, value3 중 하나 혹은 일부, 혹은 전체의 값이 변경되었습니다.")
 }, [value1, value2, value3]); // value1, value2, value3 중 하나라도 값이 변하면 실행

 

6. 마운트 해제되기 직전 Hook이 실행되도록 하려면 반환 함수인 return을 사용한다.

클래스형 컴포넌트의 componentWillUnmount()와 유사.

useEffect(() => {
    console.log('훅이 실행중입니다.');

    return () => {
        console.log('훅이 종료되는 중입니다.');
    };
});