React (8) - Effects #1

state가 변할 때마다 re-render 되면서 코드를 계속 반복한다. 우리는 코드를 한 번만 불러오고 싶을 때 어떻게 할까?

우리가 특정 API를 불러와서 해당 data를 보여줘야 하는데 state가 변경될 때마다 re-render 되면서 API를 불러오는 건 비효율!

첫번째 render에서만 API를 불러오고 싶다.

 

* useEffect 사용하면 코드를 처음 한번만 불러올 수 있다

import { useEffect, useState } from "react";
import Button from "./Button";

function App() {

  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev+1);
  console.log("i run all the time");
  
  const iRunOnlyOnce = () => {
    console.log("i run only once");
  }
  useEffect(iRunOnlyOnce,[]);
  
  //useEffect는 아래와 같이 간략하게 사용할 수 있다.
  useEffect(() => {
    console.log("Call The API....")
  }, [])

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}> click me </button>      
    </div>
  );
}

export default App;

useEffect(함수,[]) 실행시 함수는 처음만 작동되고 state 변경되도 실행되지 않는다.

 

* 코드 중 특정 부분이 변화했을 때 원하는 코드를 실행하고 싶다.

useEffect(함수,[변하는값]) 지정한 값이 변할 때 함수가 실행된다.

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("Call The API....")
  }, []);

  useEffect(() => {
    if (keyword !== "" && keyword.length > 5) {
      console.log("Search for", keyword);
    }
  }, [keyword]);


  //keyword가 변할때만 실행

  return (
    <div>
      <input
        onChange={onChange}
        value={keyword}
        type="text"
        placeholder="Search"
      >

      </input>
      <h1>{counter}</h1>
      <button onClick={onClick}> click me </button>
    </div>
  );
}

useEffect(함수,[keyword]) input에 search keyword를 받는다. 입력값이 있거나 길이가 5자 초과하고 'keyword'만 변경될 때 함수가 작동한다.

 

---

 

 useEffect(() => {
    console.log("I run only once")
  }, []);   //처음에만 작동함

  useEffect(() => {
      console.log("I run when 'keyword' change");
    },[keyword]);  // 키워드 변경에만 작동함

    useEffect(() => {
      console.log("I run when 'counter' change");
    },[counter]); // 카운터 변경에만 작동함


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

처음 app이 실행되면 전부 실행됨. (dependency)조건을 할당하지 않은 'I run only once'는 처음에만 실행 *dependency: React가 지켜볼 대상	input 박스 keyword가 변경되거나 button 클릭이 될때만 함수 실행