[React] UseEffect

React는 데이터가 변할때마다 refresh 함.

이때 데이터가 변할때마다 refresh하지않고 화면 render시 초기 한번만, 혹은 특정 데이터를 바라보면서 변경하고 싶을때 

UseEffact를 사용한다.

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("test");
  const iRunOnlyOnce = () => {
    console.log("I run only one");
  };
  useEffect(() => {
    console.log("i run only one"); //최초 한번
  }, []);
  useEffect(() => {
    if (keyword !== "" && keyword.length > 5) {
      console.log("Search For", keyword);
    }
  }, [keyword]); //키워드 변경시

  useEffect(() => {
    console.log("i run when keyword & counter change"); //키워드, 카운터 둘다 변경시 
  }, [keyword, counter]);
  return (
    <div className="App">
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here..."
      />
      <p>{counter}</p>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;