useEffect란 무엇인가?

useEffect는 어떤 조건을 마주쳤을 때 코드를 사용하기 위한 것이다.

useEffect는 세 가지 조건을 가지고 있다.

useEffect( () => {
	console.log('hello');
} );

//--------------

useEffect( () => {
	console.log('hello');
}, [] );

//---------------

const [name, setName] = useState();
useEffect( () => {
	console.log('hello');
}, [name] );

첫번째 콘솔은 렌더링 할 때 한번, 그리고 요소가 변화할 때마다(렌더링 될 때마다) 계속 발생한다.
잘 사용하지 않는 방법이다.

두번째는 처음 렌더링 할 때 딱 한번 실행한다.
예를 들어 팝업창을 띄울 때 한번 띄우고 그 이후엔 다시 실행될 필요가 없다.

세번째는 name값이 바뀔 때마다 실행된다.
예를 들어 ID중복체크를 할 때 자동으로 하는 것을 만들고 싶다면 name값이 바뀔 때마다 ID중복체크를 실행해주는 코드를 작성하면 된다.

예제

첫번째

Dependency를 완전히 비웠을 때다.

const [num, setNum] = useState(0);
    const [name, setName] = useState("wjKim");

    useEffect(() => {
        console.log("useEffect() 발생");
    });
    const counter = () => setNum(num + 1);
    const nameChange = () => setName("KimWJ");
    return (
        <div className="App">
            <button onClick={counter}>Click</button>
            <button onClick={nameChange}>Name Change</button>
            <p>{num}</p>
            <p>{name}</p>
        </div>
    );

처음 렌더링이 되면서 한번 실행된다.

그 후에 이벤트가 발생할 때마다 매번 발생된다.
이게 첫번째 방법을 사용한 것이다.

두번째

[]를 넣었을 때다.

    useEffect(() => {
        console.log("useEffect() 발생");
    }, []);

최초 렌더링에만 발생되고 그 이후로는 이벤트가 발생해도 console이 안나온다.

세번째

[]안에 변수를 넣었을 때다.

    useEffect(() => {
        console.log("useEffect() 발생");
    }, [name]);

숫자가 바뀌어도 아무것도 발생하지 않는다.
하지만 이름을 바꾸게 되면

이렇게 실행된다.

예를 들어 API 통신을 할 때 기다리는 동안 로딩 창을 보여주고 싶을 때 통신을 기다리는동안 로딩창을 띄우고 통신이 완료 되면 값을 바꾸어 화면을 띄워주는 방법도 가능하다.

마무리

무슨 일이 있던지 useEffect는 일단 렌더링 후 한번은 무조건 실행된다.

1. Dependency가 없을 때는 어떤 useState 변수이던 변화가 생기면 무조건 발생한다.
2. []가 있을 땐 최초 렌더링 할 때만 실행된다.
3. [변수 혹은 오브젝트]로 선언할 땐 변수나 오브젝트가 변할 때만 실행된다.