useEffect란?

useEffect는 구성 요소 수명 주기의 마운트, 업데이트 및 마운트 해제 단계에서 코드를 실행할 수 있는 반응 내장 후크입니다.

useEffect 후크는 실행할 함수 하나와 종속성 배열이라는 두 개의 매개변수를 받습니다.

몇 가지 예를 보자

내 app.js에서 Calculator 구성 요소 옆에 두 개의 입력 번호와 하나의 버튼을 설정했습니다. 입력에 숫자를 설정하고 버튼을 클릭하면 상태가 업데이트되고 구성 요소가 소품을 통해 숫자를 가져옵니다. 멋진 것은 없습니다.

import { useRef, useState } from "react";
import "./App.css";
import Calculator from "./Calculator";

const App = () => {
  const inputA = useRef(0);
  const inputB = useRef(0);

  const [numbers, setNumbers] = useState({
    numberA: inputA.current.value,
    numberB: inputB.current.value,
  });

  const getTotalHandler = () => {
    setNumbers({
    numberA: +inputA.current.value,
    numberB: +inputB.current.value,
    });
  };

  return (
    <>
    <div className="container">
        <div>
        <label>Input A</label>
        <input type="number" ref={inputA} />
        </div>
        <div>
        <label>Input B</label>
        <input type="number" ref={inputB} />
        </div>
        <button onClick={getTotalHandler}>Calculate</button>
        <Calculator numberA={numbers.numberA} numberB={numbers.numberB} />
    </div>
    </>
  );
};

export default App;

소품 Calculator 및 numberA를 통해 수신하고 합계를 반환하는 numberB라는 구성 요소가 있습니다.

const Calculator = ({ numberA, numberB }) => {
  return <h1>The total is {numberA + numberB}</h1>;
};

export default Calculator;

컴포넌트가 마운트되면 useEffect 실행

이제 useEffect를 사용하여 구성 요소가 마운트될 때 나를 기록하는 기능을 실행하겠습니다. 먼저 useEffect에서 react 후크를 가져옵니다.

import { useEffect } from "react";

이 후크를 구현하려면 실행할 함수와 종속성 배열을 설정해야 합니다. 그런 다음 내 구성 요소는 다음과 같습니다.

import { useEffect } from "react";

const Calculator = ({ numberA, numberB }) => {
  useEffect(() => {
    console.log(`First render`);
  }, []);

  return <h1>The total is {numberA + numberB}</h1>;
};

export default Calculator;

이 경우 처음으로 렌더링될 때 이 코드가 실행되기를 원하기 때문에 종속성 배열을 비워 두었습니다.

이제 구성 요소를 처음 로드할 때 콘솔에 표시됩니다.


종속성 배열이 비어 있으므로 이 로그는 구성 요소가 마운트될 때만 실행됩니다. App 구성 요소 상태를 업데이트하고 Calculator 소품을 업데이트하면 이 로그 함수가 다시 실행되지 않습니다. 점검 해보자:


numberA 및 numberB 소품을 업데이트했지만 함수가 실행되지 않았습니다.

소품이 업데이트될 때마다 useEffect를 실행합니다.

이제 props가 업데이트될 때마다 함수를 실행해 봅시다. 예를 들어 props에서 받은 값을 기반으로 api에서 세부 정보를 검색하기 위해 새 props를 기반으로 부작용을 수행하는 데 유용합니다. 게시물 끝에 이에 대한 예가 있습니다.

먼저 이전 코드에 두 번째 useEffect를 추가합니다.

import { useEffect } from "react";

const Calculator = ({ numberA, numberB }) => {
  useEffect(() => {
    console.log(`First render`);
  }, []);

  useEffect(() => {
    console.log(`This gets executed each time the props are updated`);
  }, [numberA, numberB]);

  return <h1>The total is {numberA + numberB}</h1>;
};

export default Calculator;

이번에는 종속성 배열을 비워두지 않고 numberA 및 numberB 소품을 추가하여 useEffect 후크가 소품 중 하나가 업데이트될 때마다 함수를 실행해야 함을 알 수 있도록 했습니다. 작동하는지 확인해 보겠습니다.



네 그렇습니다. 실제로 구성 요소가 처음 마운트될 때 두 후크useEffect가 모두 실행되는 것을 볼 수 있습니다.

useEffect를 사용하여 소품이 업데이트될 때마다 API에서 데이터 가져오기

이제 구성 요소의 props가 업데이트될 때마다 API에서 데이터를 가져오기 위해 useEffect 후크를 활용하는 방법을 보여드리겠습니다.

이 예에서는 Rick and Morty 공개 API에서 데이터를 가져오기 위해 props를 통해 받은 ID를 사용하는 Rick라는 새 구성 요소를 만들었습니다.

import { useState, useEffect } from "react";

const Rick = ({ id }) => {
  const [character, setCharacter] = useState(null);
  const [request, setRequest] = useState(`pendent`);

  useEffect(() => {
    setRequest(`pendent`);

    const getApiResults = (characterId) => {
    fetch(`https://rickandmortyapi.com/api/character/${characterId}`)
        .then((response) => response.json())
        .then((data) => {
        setCharacter(data);
        setRequest(`completed`);
        });
    };

    getApiResults(id);
  }, [id]);

  let content = ``;

  if (request === `completed`) {
    content = (
    <>
        <img src={character.image} alt={character.name} />
        <h1>{character.name}</h1>
    </>
    );
  }

  return content;
};

export default Rick;

app 구성 요소에는 난수를 생성하고 소품을 통해 Rick 구성 요소에 전달하는 버튼이 있습니다. 첫 번째 렌더링에는 버튼만 있습니다.



하지만 난수를 클릭할 때마다 생성되어 소품을 통해 전달됩니다. 이렇게 하면 해당 ID를 기반으로 소속된 Rick 및 Morty 캐릭터를 가져오는 useEffect 함수가 트리거됩니다.