[React] useEffect

useEffect

컴포넌트의 사이드이펙트 (파생적인 효과)를 제어
Mount, Update, UnMount일 때, 어떤 동작을 할 수 있음

useEffect의 사용

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

뒤에 배열에 들어있는 값이 변경되게 되면,
앞에 있는 콜백함수가 실행됨

---

배열 = 의존성배열
= dependency array
= deps

이 배열에 여러개의 값도 들어갈 수 있음 (하나만 변경되도 콜백함수 실행)

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

function App() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState("");

  useEffect(() => {
    console.log(`count : ${count} | input : ${input}`);
  }, [count, input]); // count가 바뀔때마다 콜백함수 실행
  // 의존성 배열
  // = dependency array
  // = deps
  // 배열안에 여러개를 넣을 수도 있음

  const onClickButton = (value) => {
    setCount(count + value);
  };

  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;

count가 바뀔때마다 콘솔에 찍히는 모습을 볼 수 있음

• 맨 처음 마운트 될 때도 콘솔에 찍힘 (count, input 변수가 마운트되면서 초기화되기때문)

왜 useEffect를 쓰는가

굳이 useEffect를 쓰지않고, count또는 input값이 변할 때 콜백함수가 실행되는 것으므로.. 그러면 onChange 또는 onClick에서 console.log()를 하면되는것이 아닌가 할 수 있다.

        <input
          value={input}
          onChange={(e) => {
            setInput(e.target.value);
            console.log(input);
          }}
        />

현재 input의 값은 1234이지만 console에 찍히는 값은 123인 것을 확인할 수 있다.
이전값이 출력되는 것이다.

그 이유는..
react의 state는 비동기로 업데이트 된다.
(= set...는 비동기로 동작 = 호출만된거지 완료는 후에 됨)
그래서 setInput이 호출되었지만, 완료되기전에 console.log(input)이 실행되어 바뀌기전의 값인 123을 보여주는 것이다.

결론

따라서, 변경된 state의 값을 사용하고 싶을 때는 useEffect를 사용해야하는 것이다.