useEffect 사용하기

useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣습니다. 만약에 deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출됩니다.

 

    useEffect(() => {
      console.log('처음 렌더링시에만 실행됨!!')
    }, []);

 

두번째 파라미터에 빈 배열을 줬을때 최초 렌더링시에만 한번 실행됨.

 

아래 예제와 같이 버튼을 클릭했을때 number의 값이 변화가 생길때에도 실행되게 해보겠습니다.

import React, { useEffect, useState } from 'react';

const App = () => {

    const [number, setNumber] = useState(0);

    const increase = () => {
        setNumber(number+1);
    }

    const decrease = () => {
        setNumber(number-1);
    }

    useEffect(() => {
      console.log('처음 렌더링시에만 실행됨!!')
    }, [number]);

    return (
        <div>
            <p>{number}</p>
            <button onClick={increase}>+1</button>
            <button onClick={decrease}>-1</button>
        </div>
    )
}

export default App

 

버튼이 클릭됐을때 결과