7. useEffect (import & export)

# useEffect

useEffect란?

useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook이다. 여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 말한다. 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었다.

 

- 파일 import & export 의 개념 정리(7강에 정리 되어 있음 - 다시 정리 해야 됨)

 

import { useEffect, useState } from 'react';
import './App.css';

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

  const download = () => {
    //다운로드 받고 (통신)
    let downloadData = 5;
    setData(downloadData);
  };

  // 실행시점 :
  // (1) App() 그림이 최초 그려질 때\
  // (2) 상태 변수가 변경될때 (app()이 실행된다. 그게 dependency List에 등록되어 있어야 한다.)
  useEffect(() => {
    console.log('useEffect() 실행됨');
    download();
  }, [search]);

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

export default App;

결과 화면