Deps

1. Search Bar 생성하기

import { useEffect, useState } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log(" i run all the time");

  const [keyword, setKeyword] = useState("");
  const onChange = (event) => setKeyword(event.target.value);
  useEffect(() => {
    console.log("call the api...");
  }, []);
  return (
    <div>
      <input
        type="text"
        placeholder="Search here.."
        onChange={onChange}
        value={keyword}
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>Click Me</button>
    </div>
  );
}

export default App;

 

 

2. 코드의 일정 부분만 변화했을 때 원하는 코드를 실행 하도록 하기

 

키워드 변화 시 실행되도록 하고 싶다면 코드를 아래와 같이 추가한다.

  useEffect(() => {
    console.log("Seach for ", keyword);
  }, [keyword]);

 

버튼을 클릭하더라도 console에 Seach for가 찍히지 않는다.

 

seach에 한글자씩 기재할 때마다 콘솔에 Seach for가 찍히게되는데 

  useEffect(() => {
    if (keyword != "" && keyword.length > 5) console.log("Seach for ", keyword);
  }, [keyword]);

위와 같은 조건문을 주게되면 조건에 만족해야만 콘솔에 찍히게 된다.