04. useEffect, 제발 재발 방지해줘

장원영이라면 내 마음속에 얼마든지 반복해서 렌더링해도 된다.

React의 주요한 특징이라 함은 Component에 변화가 일어날때마다 계속해서 Rendering이 일어난다는 것이다. 좋다. 좋은데, 만약에 간단한 webpage라면 상관이 없겠지만, 꽤나 헤비한 API들이 들어있다면, 이 것들이 계속해서 rendering되어야 할 필요는 없을 것이다. 그렇기에 우리는 이러한 반복적 rendering을 useEffect()를 통해 방지할 수 있다.

useEffect()
: Component가 렌더링 될 때마다, 특정 작업을 실행할 수 있도록 하는 Hook

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("Calling API");
  }
  useEffect(() =>{
    iRunOnlyOnce();
  },[]);
  useEffect(() => {
    if(keyWord!=="" && keyWord.length>5){
      console.log("Search For", keyWord);
    }
  },[keyWord]);
  return (
    <div>
      <input value={keyWord} onChange={onChange} type="text" placeholder="Search here..."/>
      <h1>{counter}</h1>
      <button onClick={onClick}>ㅎㅇ</button>
    </div>
  );
}

export default App;

useEffect(실행할 함수, 의존성 배열[]) 을 받는다.
만약 의존성 배열이 비어있다면, Component가 Mount될 때 한 번만 실행된다.

  useEffect(() =>{
    iRunOnlyOnce();
  },[]);

의존성 배열에 여러 상태 또는 prop을 포함시킬 수 있다. 이 때는 이 배열에 포함된 값이 변경될 때마다, 다시 실행된다.

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

조건을 만족할 때 keyword가 다시 실행됨.