[React JS] useEffect

useEffect는 매번 호출되지 않고 실행 시 한번만 호출된다. 다만 특정 코드만 변화시 재호출하게 설정할 수 있다.

글로는 어려우니 코드와 함께보기로 한다.

import PropTypes from "prop-types";
import { useState, useEffect } from "react";
import styles from "./Button.module.css";

const Button = ({ text }) => {
  const [counter, setCounter] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onChange = (event) => {
    setKeyword(event.target.value);
  };
  const onClick = () => {
    setCounter((prev) => prev + 1);
  };
  useEffect(() => {
    console.log("call API");
  }, []);
  useEffect(() => {
    console.log("I run when keyword changes");
  }, [keyword]);
  useEffect(() => {
    console.log("I run when counter changes");
  }, [counter]);
  useEffect(() => {
    console.log("I run when keyword & counter changes");
  }, [keyword, counter]);
  return (
    <div>
      <input onChange={onChange} type="text" placeholder="Search here..." />
      <button onClick={onClick} className={styles.btn}>
        {text}
      </button>
      <h3>{counter}</h3>
    </div>
  );
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

버튼은 클릭 시 counter가 작동되게 설정하고, input은 텍스트 입력시 onChange 함수로 keyword가 변경되도록 설정했다.

처음 페이지를 새로고침시

useEffect에 작성되어 있던 콘솔들이 전부 실행된다.

이후 카운터 버튼을 클릭하면

input값을 변경해주면

이처럼 array값에 해당 코드를 넣어주면 그 코드가 변화시 해당 useEffect가 실행되고, 빈 arrary를 가진 useEffect는 페이지 새로고침시 한번만 실행된다.