8. useEffect

리액트는 첫 로드 이후 state의 변화를 감지하면 컴포넌트를 리렌더링한다.

특정 state의 변화에만 리렌더링 할 수 있게 설정하는 것이 useEffect이다.

 

useEffect(실행할함수, deps) 의 형태인데 deps의 변화를 감지하여 함수를 실행해주는 것이다.

 

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(iRunOnlyOnce, []);
  useEffect(() => {
    if(keyword !== "" && keyword.length > 5) {
      console.log("Search for", keyword);
    }    
  }, [keyword])
  //keyword가 변화할 때 코드를 실행할 거다. counter state가 변할 때는 실행되지 않음.
  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;

state는 counter와 keyword 두 개가 설정되어 있다.

페이지를 처음 로드하면 이 상태가 된다. click me를 눌러 counter의 state를 변화시키면 컴포넌트가 리렌더 되기 때문에 I run all the time이 한 줄 추가된다. 만약 useEffect를 사용하지 않았다면 I run only once와 search for keyword 또한 같이 실행되었을 것이다.

 

useEffect에서 deps에 [keyword]를 넣어 주었고 console.log("search for", keyword)에는 if문이 걸려있기 때문에

이런식으로 조건이 만족되었을 때만 Search for를 콘솔에 찍어준다.

deps에는 여러개의 조건이 들어갈 수도 있다.