React 기초 - useEffect 함수

useEffect 함수의 사용

function App() {
  const [data, setData] = useState(0);

  const download = () => {
    let downloadData = 5;
    setData(downloadData);
  };

  useEffect(() => {
    console.log('useEffect 실행됨');
    download();
  });

  return (
    <div>
      <h1>데이터 : {data}</h1>
      <button
        onClick={() => {
          setData(data + 1);
        }}
      >
        더하기
      </button>
    </div>
  );
}

export default App;

ㆍ useEffect() 함수는 App() 함수가 마운트 될 때 실행되는 함수이다.

ㆍ 또한 상태 변수의 값이 변경될 때마다 실행된다.

ㆍ 위 코드는 button의 onClick 함수에 의해서 상태 변수 값이 변경되므로, 지속적으로 useEffect() 함수가 호출된다는 문제점이 있다.

ㆍ 따라서, useEffect() 함수의 의존성을 설정할 필요가 있다.

---

useEffect의 의존성 설정

useEffect(() => { console.log('useEffect 실행됨'); download(); }, [data]);

ㆍ useEffect() 함수의 두 번째 매개변수에 값을 집어넣음으로써 의존성 설정이 가능하다.

ㆍ 위 코드는 data 값의 변경에 의존하겠다는 의미이다. → data 값이 변경될 때마다 실행

 

useEffect(() => { console.log('useEffect 실행됨'); download(); }, []);

ㆍ 위 코드는 어떠한 의존 관계도 설정하지 않겠다는 의미이다. → 최초 한 번만 실행

---

GitHub - qlsdud0604/react-basic: 리액트의 기초를 학습하는 공간