useEffect_(노마드코더)

useEffect

useState를 통해 컴퍼넌트리렌더링을 할 때 매번 호출 되는 것을 좀 방지하고
컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook

import Button from "./Button";
import styles from "./App.module.css";
import { useEffect, useState } 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");
  useEffect(()=>{
    console.log("I run only once.");
  },[]);

  useEffect(()=>{
    console.log("I run when 'keyword' changes.");
  }, [keyword]);

  useEffect(()=>{
    console.log("I run when 'counter' changes.");
  }, [counter]);
  
  useEffect(()=>{
    console.log("I run when 'keyword' & 'counter' changes.");
  }, [keyword, counter]);
  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;

키워드를 입력하면

useEffect(()=>{
    console.log("I run when 'counter' changes.");
  }, [counter]);

useEffect(()=>{
    console.log("I run when 'keyword' & 'counter' changes.");
  }, [keyword, counter]);

의 [keyword] useEffect 코드부분만 리렌더링 되는 것을 알 수 있다.

  useEffect(()=>{
    console.log("I run when 'counter' changes.");
  }, [counter]);
  
  useEffect(()=>{
    console.log("I run when 'keyword' & 'counter' changes.");
  }, [keyword, counter]);

의 [counter] useEffect 코드부분이 리렌더링 되는 것을 알 수 있다.