import './App.css';
import { useEffect } from 'react';
import Sub from './Sub';
import { num } from './Sub';
import { useState } from 'react';
function App() {
const[data, setData] = useState(0);
const[search, setSearch] = useState(0);
const download = () => {
console.log('download 실행');
let downloadData = 5;
setData(downloadData);
}
// 실행 시점 :
// (1) App() 함수가 최초 실행될 때(화면이 나타날 때)
// (2) 상태 변수가 변경될 때 (dependency list에 등록되었을 때)
// (3) 의존 리스트에 있는 상태 변수가 변경될 때
useEffect (() => {
console.log('App()에서 useEffect 실행');
download();
}, [search]); // [] 에 상태 변수를 넣으면 상태 변수가 변경될 때만 실행
return (
<div>
<button xxonClick={() => {
setSearch(2);
}}>검색하기</button>
<h1>데이터 : {data}</h1>
<button xxonClick={() => setData(data + 1)}>증가</button>
<Sub />
{num}
</div>
);
}
export default App;