React에서 데이터를 가져오기 위해 useEffect 사용하기-JS 튜토리얼-php.cn

Using useEffect for Fetching Data in React

React에서 데이터를 가져오기 위해 useEffect 사용하기

React에서 useEffect 후크는 기능적 구성 요소에서 부작용을 수행하는 데 일반적으로 사용됩니다. API 또는 서버에서 데이터를 가져오는 것은 가장 일반적인 부작용 중 하나이며, useEffect를 사용하면 구성 요소에서 데이터 가져오기를 쉽게 관리할 수 있습니다. 다음은 useEffect를 사용하여 React 기능 구성 요소에서 데이터를 가져오는 방법에 대한 자세한 설명과 예입니다.

1. 기본설정

useEffect를 사용하여 데이터를 가져오려면 일반적으로 다음 패턴을 사용합니다.

useEffect를 사용하여 구성요소가 마운트되거나 업데이트될 때 가져오기 요청을 트리거합니다.
useState 후크를 사용하여 가져온 데이터를 구성 요소의 상태에 저장합니다.
로드 및 오류 상태를 처리하여 사용자 경험을 개선합니다.

2. useEffect를 사용한 데이터 가져오기의 예

다음은 useEffect 및 useState를 사용하여 API에서 데이터를 가져오는 방법을 보여주는 예입니다.

import React, { useState, useEffect } from 'react';

const DataFetchingComponent = () => {
  // State variables to store data, loading status, and errors
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Using useEffect to fetch data
  useEffect(() => {
    // Define the function for fetching data
    const fetchData = async () => {
      try {
        // Start by setting loading state to true
        setLoading(true);

        // Make the fetch request
        const response = await fetch('https://api.example.com/data');

        // Check if the response is ok (status code 200-299)
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        // Parse the JSON data
        const result = await response.json();

        // Update the state with the fetched data
        setData(result);
      } catch (error) {
        // Handle errors and set the error state
        setError(error.message);
      } finally {
        // Set loading to false once the request is complete
        setLoading(false);
      }
    };

    // Call the fetchData function
    fetchData();
  }, []); // Empty dependency array means this effect runs once when the component mounts

  // Conditionally render the UI based on loading, error, and data
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>Data Fetching Example</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetchingComponent;

로그인 후 복사

3. 코드 분석:

상태 변수:
- data: 성공적으로 검색된 후 가져온 데이터를 저장합니다.
- loading: 데이터를 아직 가져오는 중인지 추적하는 부울 상태입니다.
- error: 가져오기 프로세스 중에 발생하는 모든 오류 메시지를 저장합니다.
효과 후크 사용:
- useEffect 후크 내에 비동기 함수 fetchData를 정의합니다.
- fetchData는 종속성 배열 []이 비어 있기 때문에 구성 요소가 마운트될 때 즉시 호출됩니다.
- fetchData 내부에서는 fetch() 메서드를 사용하여 API 호출을 수행합니다. 데이터를 가져온 후 오류(예: 200이 아닌 응답)를 확인하고 그에 따라 상태를 업데이트합니다.
로드 및 오류 처리:
- 가져오기 요청이 진행되는 동안 구성 요소는 처음에 "로드 중..." 메시지를 렌더링합니다.
- 가져오는 동안 오류가 발생하면 오류 메시지가 표시됩니다.
- 데이터를 성공적으로 가져오면 목록에 표시됩니다.

4. 기억해야 할 핵심 사항:

비동기 기능 사용 중효과:
- useEffect 자체는 비동기로 표시할 수 없지만, 효과 내부에 비동기 함수를 정의하여 호출할 수 있습니다.
빈 종속성 배열([]):
- 종속성 배열이 비어 있으면 효과는 초기 렌더링 후 한 번만 실행되어 클래스 구성 요소의 componentDidMount 동작을 모방합니다.
오류 처리:
- 가져오기 실패 시 애플리케이션이 충돌하거나 예기치 않게 동작하지 않도록 오류를 처리하는 것이 중요합니다.
국가 관리:
- useState를 사용하여 로딩, 데이터, 오류 상태를 관리하면 이에 따라 UI를 쉽게 관리하고 표시할 수 있습니다.

5. 데이터 가져오기에 대한 useEffect의 일반적인 패턴

버튼 클릭 시 데이터 가져오기(효과를 수동으로 트리거)

때때로 구성 요소가 마운트될 때 데이터를 가져오는 것이 아니라 버튼 클릭과 같은 사용자 상호 작용을 기반으로 데이터를 가져오고 싶을 수도 있습니다. 이 경우 이벤트 핸들러에서 상태 변수를 업데이트하여 useEffect를 트리거할 수 있습니다.

import React, { useState, useEffect } from 'react';

const DataFetchingComponent = () => {
  // State variables to store data, loading status, and errors
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Using useEffect to fetch data
  useEffect(() => {
    // Define the function for fetching data
    const fetchData = async () => {
      try {
        // Start by setting loading state to true
        setLoading(true);

        // Make the fetch request
        const response = await fetch('https://api.example.com/data');

        // Check if the response is ok (status code 200-299)
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        // Parse the JSON data
        const result = await response.json();

        // Update the state with the fetched data
        setData(result);
      } catch (error) {
        // Handle errors and set the error state
        setError(error.message);
      } finally {
        // Set loading to false once the request is complete
        setLoading(false);
      }
    };

    // Call the fetchData function
    fetchData();
  }, []); // Empty dependency array means this effect runs once when the component mounts

  // Conditionally render the UI based on loading, error, and data
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>Data Fetching Example</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetchingComponent;

로그인 후 복사

이 예에서는:

버튼을 클릭한 후에만 데이터를 가져옵니다(setFetchDataFlag(true)).
useEffect는 fetchDataFlag 상태의 변경 사항을 수신하고 업데이트되면 가져오기를 트리거합니다.

6. 결론

React에서 데이터를 가져오기 위해 useEffect를 사용하는 것은 부작용을 관리하는 효율적이고 깔끔한 방법입니다. useState와 결합하면 기능 구성 요소에서 데이터 가져오기, 로드 상태 및 오류 처리를 관리할 수 있습니다. 앱이 좋은 사용자 경험을 제공할 수 있도록 항상 오류와 극단적인 경우를 처리하는 것을 잊지 마세요.

위 내용은 React에서 데이터를 가져오기 위해 useEffect 사용하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!