useEffect

• state가 변경되면 모든 코드가 re-render된다. 
• state가 변경되도 re-render 하고 싶지 않은 코드가 있다면?

useEffect

• useEffect(iRunOnlyOnce, []);
• 첫번째 argument : 한번만 실행되게 하고 싶은 코드 (iRunOnlyOnce 는 function).
• 두번째 argument : 이 state가 변화될때만 첫번째 argument 코드가 re-render 됨 ([]로 비워두면 처음 한번만 실행됨).

  ---

function App() {
  const [counter, setCounter] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setCounter((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value); 
  console.log("I run all the time");
  
  useEffect(() => {
      console.log("I run only 'keyword' changes.", keyword);},
    [keyword]);

    useEffect(() => { 
        console.log("I run only 'counter' changes.", keyword);},
      [counter]);
    
  useEffect(() => {
    console.log("I run only once");}, []);
  
  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Searcg here..." />
      <h1>{counter}</h1>
      <button onClick={onClick}>Click ME</button>
    </div>
  );
}

export default App;