발생가능한 다른 문제를 찾아보고 해결해보자

import { useState, useEffect } 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);
  console.log("I run all the time");

  const iRunOnlyOnce = () => {
    console.log("I run only once");
  };

  useEffect(() => {
    console.log("Call the API");
  }, []);
  console.log("Search for", keyword);
  //counter가 변화할 때 marvel영화를 검색하고 싶진 않다. 오직 keyword가 변화할 때만 serch되도록 하고 싶다.
  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here..."
      ></input>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}
//우리가 한 것은 그냥 input을 만들고 event listener를 연결했고 이 function이 작동할 때 event를 발생시킨 input에서 value를 받아서
// 그 value를 여기 있는 'keyword' state에 넣어줬다. 그리고 그 keyword를 가져와서 input의 value로 사용하면 우리가 원할 때 input을
// 조작할 수 있다.
export default App;

내 코드의 특정한 부분만이 변화했을 때 원하는 코드들을 실행할 수 있는 방법들을 배우자!

import { useState, useEffect } 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);
  console.log("I run all the time");
  useEffect(() => {
    console.log("Search for", keyword);
  }, [keyword]); //keyword가 변화할 때만 렌더링 하고 싶다. 마법이 일어나는 곳이 바로 [] 안이다 !!
  // 여기서 하는 것은 keyword가 변화할 때 코드를 실행할 거라고 reactJS에게 알려주는 것이다.
  //counter가 변화되었을 때는 실행 되지 않는다. 오직 keyword가 변화할 때만 !! 즉 keyword를 지켜보라는 말이다.

  const iRunOnlyOnce = () => {
    console.log("I run only once");
  };

  useEffect(() => {
    console.log("Call the API");
  }, []);
  // 빈 array를 써 주었을때 코드가 단 한번만 실행되는 이유는 위와 같다.
  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here..."
      ></input>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}
export default App;

함수 조건 조금 추가해 주었다.

import { useState, useEffect } 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);
  console.log("I run all the time");
  useEffect(() => {
    if (keyword !== "" && keyword.length >= 5) {
      //keyword가 빈칸이 아니며 5보다 길 때 라는 조건을 추가했다
      console.log("Search for", keyword);
    }
  }, [keyword]);
  const iRunOnlyOnce = () => {
    console.log("I run only once");
  };

  useEffect(() => {
    console.log("Call the API");
  }, []);
  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here..."
      ></input>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}
export default App;

이제 언제 코드가 실행될 지 결정하는 법을 배웠다.

특정한 keyword가 업뎃 될때만 코드실행이 가능하다.

keyword와 counter가 변화될 때 실행하고 싶다면
** [keyword, counter] 둘다 적어주면 된다 !!