빈 종속성 배열이 있어도 React useEffect 후크가 여러 번 실행되는 이유는 무엇입니까?

질문
React 프로젝트에서 작업하는 동안 useEffect 후크에 문제가 발생했습니다. 내 목표는 구성 요소가 마운트될 때 한 번만 API에서 데이터를 가져오는 것이었습니다. 그러나 빈 종속성 배열을 제공했는데도 useEffect가 계속 여러 번 실행되었습니다.

코드 스니펫은 다음과 같습니다.

import React, { useEffect, useState } from "react";
import axios from "axios";

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    console.log("Fetching data...");
    axios.get("https://jsonplaceholder.typicode.com/posts")
      .then(response => setData(response.data))
      .catch(error => console.error(error));
  }, []);
  return (
    <div>
      <h1 id="Data">Data</h1>
      <ul>
        {data.map(item => (
          <li key="{item.id}">{item.name}</li>
        ))}
      </ul>
    </div>
  );
};
export default MyComponent;

빈 종속성 배열([])에도 불구하고 useEffect가 여러 번 실행되었습니다. 개발 서버를 다시 시작해 보았으나 문제가 지속되었습니다. 몇 가지 조사와 문제 해결 후에 근본 원인을 파악하고 해결했습니다.
대답

왜 이런 일이 발생하는가

개발 중인 엄격 모드:

앱이 StrictMode가 활성화된 React 개발 모드에서 실행 중인 경우 React는 의도적으로 구성 요소를 여러 번 마운트 및 마운트 해제합니다. 이는 문제를 일으킬 수 있는 부작용을 감지하기 위한 개발 전용 동작입니다.

재렌더링 또는 핫 모듈 교체(HMR):

개발 중에 코드 변경으로 인해 핫 모듈 교체가 트리거되어 구성 요소가 다시 렌더링되고 useEffect가 다시 실행될 수 있습니다.

이 동작을 수정하거나 처리하는 방법

엄격 모드 식별:

StrictMode를 사용하는 경우 이 동작은 개발 중에만 발생하며 프로덕션 빌드에는 영향을 미치지 않는다는 점을 이해하세요. 제거하여 일시적으로 비활성화할 수 있습니다

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<app></app>, document.getElementById("root"));  

그러나 활성화된 상태로 두고 잠재적인 부작용을 적절하게 처리하도록 코드를 조정하는 것이 좋습니다.

중복 API 호출 방지:

플래그를 사용하여 구성 요소의 수명 주기 동안 API 호출이 한 번만 발생하는지 확인하세요.

import React, { useEffect, useState, useRef } from "react";
import axios from "axios";

const MyComponent = () => {
  const [data, setData] = useState([]);
  const isFetched = useRef(false);

  useEffect(() => {
    if (isFetched.current) return;

    console.log("Fetching data...");
    axios.get("https://api.example.com/data")
      .then(response => setData(response.data))
      .catch(error => console.error(error));

    isFetched.current = true;
  }, []);

  return (
    <div>
      <h1 id="Data">Data</h1>
      <ul>
        {data.map(item => (
          <li key="{item.id}">{item.name}</li>
        ))}
      </ul>
    </div>
  );
};
export default MyComponent;

useRef를 사용하면 StrictMode로 인한 추가 렌더링에 관계없이 API 호출이 한 번만 발생합니다.

주요 시사점
. 개발 중인 React의 Strict 모드는 의도적이며 그대로 두어도 안전합니다.
. 프로덕션 빌드에는 이 문제가 발생하지 않습니다. . 필요한 경우 useRef 또는 기타 기술을 사용하여 부작용을 관리하세요.
필요한 경우 useRef 또는 기타 기술을 사용하여 부작용을 관리하세요.
프로덕션 빌드에는 이 문제가 발생하지 않습니다.
필요한 경우 useRef 또는 기타 기술을 사용하여 부작용을 관리하세요.

위 내용은 빈 종속성 배열이 있어도 React useEffect 후크가 여러 번 실행되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!