[React] UseEffect 사용하기(노마드코더 영화 웹서비스 만들기)

import Button from "./Button";
import styles from "./App.module.css";
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);

  useEffect(() => {
    console.log("I run only once.");
  }, []); // 처음 render 시에 딱 한 번 실행
  useEffect(() => {
    console.log("I run when 'keyword' changes.");
  }, [keyword]); // keyword 변화할 때마다 코드 실행
  useEffect(() => {
    console.log("I run when 'counter' changes.");
  }, [counter]); // counter 변화할 때마다 코드 실행
  useEffect(() => {
    console.log("I run when 'counter, keyword' changes.");
  }, [keyword, counter]); // 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는 실행시키고자 하는 함수와 dependency로 이루어져있다.

dependency가 존재하면, 해당 리스트의 값이 변화할 때만 실행된다.

비어 있을 경우 처음 render시에 딱 한번만 실행된다.