useEffect란?

어떤 함수의 값이 변경될때만 리랜더링 시킬때
매우유용하게 사용가능

즉 값이 변경될부분만 리랜더링이 되며, 나머지 부분은 변경되지 않는다

예제코드

import {useState, useEffect} from 'react'

function App() {
  const [counter, setCounter] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setCounter((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value); // state를 활용
  useEffect(() => {
    console.log('CALL THE API...');
  }, []); //값이 정해지지 않았기에 페이지 첫 호출시 실행
  useEffect(() => {
    if(keyword !== "" && keyword.length > 5){
    console.log("SEARCH FOR", keyword);
    }
  }, [keyword]); // keyword값이 변경될때 실행
  useEffect(() => {
    console.log("i run when counter", counter);
  }, [counter]); // counter값이 변경될때 실행
  useEffect(() => {
    console.log("i run when keyword & counter");
  }, [keyword, counter]);
  return (
    <div>
      <input
      value={keyword}
      onChange={onChange} // props로 내려준다
      type="text"
      placeholder="Search here..."
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>Click Me!</button>
    </div>
  );
}

export default App;