useEffect

// import logo from './logo.svg';

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) 상태 변수가 변경될 때

  // (3) 의존리스트 관리를 할 수 있다.

  useEffect(() => {

    console.log("useEffect 실행됨1233")

    download();

  }, [search]); // [data] : 데이터가 변경될 때마다 실행, [] : 처음 시작할 때만 실행 / [data] : data에 의존적

  return (

    <div>

      <button onClick={() => { setSearch(search + 2) }}>검색하기</button>

      <h1>데이터 : {data}</h1>

      <button onClick={() => {

        setData(data + 1);

      }}>더하기</button>

    </div >

  );

}

export default App;