React - Effect Hook

useEffect

useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 해주는 Hook 이다. 이 컴포넌트에서 실행하는 Sdie effect는 브라우저 API를 이용하여, 타이틀을 변경하는 것이다.

예제

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const proverbs = [
    "삶이 있는 한 희망은 있다",
    "Stay hungry, Stay foolish",
    "먼저 자신을 비웃어라. 다른 사람이 당신을 비웃기 전에",
    "Carpe diem",
    "언제나 현재에 집중할수 있다면 행복할것이다"
  ];
  const [idx, setIdx] = useState(0);

  const handleClick = () => {
    setIdx(idx === proverbs.length - 1 ? 0 : idx + 1);
  };

  return (
    <div className="App">
      <button onClick={handleClick}>명언 제조기</button>
      <Proverb saying={proverbs[idx]} />
    </div>
  );
}

function Proverb({ saying }) {
  useEffect(() => {
    document.title = saying;
  });
  return (
    <div>
      <h3>오늘의 명언</h3>
      <div>{saying}</div>
    </div>
  );
}

useEffect의 첫 번째 인자는 함수이다. 이 함수는

이처럼 매번 새롭게 렌더링될 때, Effect Hook이 실행된다.
주의해야 할 것은

useEffect의 두 번째 인자는 배열이다. 이 배열은 boolean형태의 표현식이 아닌, 어떤 값의 변경이 일어날 때를 의미한다. 따라서, 이 배열에는 어떤 값이 들어간다. 또한, 이 배열은 종속성 배열이다.

조건부 실행 예제

import { useEffect, useState } from "react";
import "./styles.css";
import { getProverbs } from "./storageUtil";

export default function App() {
  const [proverbs, setProverbs] = useState([]);
  const [filter, setFilter] = useState("");
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("언제 effect 함수가 실행될까?");
    const result = getProverbs(filter);
    setProverbs(result);
  }, [filter]);

  const handleChange = (e) => {
    setFilter(e.target.value);
  };

  const handleCounterClick = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      필터
      <input type="text" value={filter} onChange={handleChange} />
      <ul>
        {proverbs.map((prvb, i) => (
          <Proverb saying={prvb} key={i} />
        ))}
      </ul>
      <button onClick={handleCounterClick}>카운터 값: {count}</button>
    </div>
  );
}

function Proverb({ saying }) {
  return <li>{saying}</li>;
}

이 예제는 filter가 변할때에만, effect함수가 실행된다. 그리고, 카운트를 올리는 버튼은 컴포넌트의 상태가 바뀌고 업데이트 되지만, effect함수는 실행되지 않는다. 종속성 배열에는 filter만 존재하고, count는 존재하지 않기 때문이다.