#6.2 Deps

• 글자를 타핑할때마다 api를 새로 호출한하고 가정하면 -> 겁나 별로
• search keyword에 변화가 있을때만 검색하고 싶음
• counter가 변화할 때에도 영화를 검색하고 싶지 않음
• 코드의 특정한 부분만이 변화했을 때 원하는 코드들을 실행할 수 있게 하고싶음

import { useEffect, useState } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("")
  const onClick = () => setValue((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value); //event를 발생시킨 input에서 value를 받아서 keyword에 넣음
  
  useEffect(() => {
    console.log("나는 한번만 실행돼용");
  }, []); //아무것도 변화하지 않았을 때 코드를 실행(리액트가 지켜볼것이 없음)
  useEffect(() => {
      console.log("나는 키워드가 변화할 때 실행됨요");
  }, [keyword]); //keyword가 변화할 때 코드를 실행하고 싶다면
  useEffect(() => {
      console.log("나는 카운터가 변화할 때 실행됨요");
  }, [counter]); 
  useEffect(()=>{
    console.log("나는 카운터랑 키워드가 변화할때 실행됨요")
  }, [keyword,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;