import {useState, useEffect} from "react";

function App() {
    const [counter, setValue] = useState(0);
    const [keyword, setKeyword] = useState("");
    const onClick = () => setValue(counter + 1);
    const onChange = (event) => {setKeyword(event.target.value)};

    useEffect(() => {
        console.log("I Run only Once");
    }, []);
    useEffect(() => {
        console.log("I run when 'keyword' changes");
    }, [keyword]);
    useEffect(() => {
        console.log("I run when 'counter' changes");
    }, [counter]);

    return (
        <div>
            <input value={keyword} onChange={onChange} type="text" placeholder="Search Here" />
            <h1>{counter}</h1>
            <button onClick={onClick}>click me</button>
        </div>
    );
}

export default App;

• useEffect 는 앱이 실행될 때 한번만 수행 할 function 을 정의할 수 있다
• useEffect 의 인자 중 두번째 인자는 어떤 변수가 변경될 때 마다 이를 감지하여 수행되도록 할 수 있다