React - useEffect()

1. useEffect?

  - React Hook의 한 종류, side effect를 처리하기 위하여 사용한다.

  - useState처럼 state 변경이 감지되면 리렌더링을 하는 사이드 이펙트를 처리하기 위하여 사용한다.

  - 리랜더링과 무관한 작업, 데이터 비동기 호출 등의 기능을 구현할 때 사용한다.

  - ** useEffect는 콜백함수와 deps가 있던 없던, 랜더링 된 후 최초 1번만 실행된다.

 

2. 사용법과 동작방식

  - 콜백함수와 deps가 모두 있을 때

useEffect(()=>{.. }, deps)

  > deps(=의존성 배열)의 값이 변경될 때를 감지하여, 콜백함수를 실행한다.

 

  - deps가 없을 때 

useEffect(()=>{.. })

  > 모든 변경을 감지하여 실행한다.

 

  - deps가 빈 배열 [] 일때

useEffect(()=>{.. }, [])

  > 한번만 실행되고, 그 이후 전혀 실행되지 않음.

 

3. 예제

import "./App.css";
import Viewer from "./components/Viewer";
import Controller from "./components/Controller";
import { useEffect, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState("");
  
  useEffect(() => {
    console.log(`count: ${count} / input: ${input}`);
  }, [count, input]); // 의존성 배열, deps(=dependency array)
  
  const onClickButton = (value) => {
    setCount(count + value);
    console.log(count); // 이전의 값이 출력되므로 여기다가 사용하면 안됨, useEffect를 통해서 변경된 스테이트 값을 이용해야함
  };

  return (
    <div className="App">
      <h1>Simple Counter</h1>
      <section>
        <input value={input} onChange={(e)=>{
          setInput(e.target.value);
        }} />
      </section>
      <section>
        <Viewer count={count} />
      </section>
      <section>
        <Controller onClickButton={onClickButton} />
      </section>
    </div>
  );
}

export default App;