React에서 데이터 가져오기

데이터 가져오기는 React 애플리케이션의 기본이며 사용자 데이터 로드, 콘텐츠 동적으로 렌더링 등과 같은 기능을 강화합니다. React는 앱의 복잡성과 성능 요구 사항에 따라 선택할 수 있는 다양한 라이브러리와 접근 방식을 통해 데이터 처리를 위한 유연한 생태계를 제공합니다. 이 기사에서는 Fetch API, Axios, Async/Await, React Query, SWR 및 GraphQL을 포함하여 React에서 데이터를 가져오는 몇 가지 주요 방법을 살펴보겠습니다.

---

1. Fetch API를 사용하여 데이터 가져오기

Fetch API는 네트워크 요청을 더 간단하게 만들고 최신 브라우저에서 널리 지원되는 내장 웹 API입니다. API 요청의 데이터를 나타내는 응답 객체로 해결되는 Promise를 반환합니다.

예

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

const FetchExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key="{item.id}">{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

Fetch API를 사용해야 하는 경우

• 소규모 프로젝트 또는 기본적인 데이터 가져오기가 필요한 프로젝트
• 브라우저 기반 앱과의 종속성과 호환성이 최소화됩니다.

---

2. 데이터 가져오기에 Axios 사용

Axios는 요청 및 응답 인터셉터, 요청 및 응답 변환 기능 등 Fetch API보다 더 많은 기능을 제공하는 브라우저 및 Node.js용 약속 기반 HTTP 클라이언트입니다.

예

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

const AxiosExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key="{item.id}">{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

Axios의 장점

• Fetch API를 완전히 지원하지 않는 이전 브라우저를 지원합니다.
• HTTP 오류 코드를 거부하여 더 나은 오류 처리를 제공합니다.
• 간편한 요청 및 응답 변환이 가능하므로 더 크고 복잡한 애플리케이션에 널리 사용됩니다.

---

3. 더 나은 가독성을 위해 Async/Await 구문 사용

async 및 wait를 사용하면 JavaScript에서 비동기 코드 처리가 훨씬 더 깔끔해졌습니다. Fetch API와 Axios는 모두 async/await 구문과 함께 사용되어 코드를 더 쉽게 읽을 수 있습니다.

가져오기의 예

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    setData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

비동기/대기의 이점

• 프로미스 체인보다 가독성이 향상되고 처리가 더 쉽습니다.
• 오류 처리를 위해 try/catch 블록을 사용할 수 있습니다.

---

4. React 쿼리: 강력한 데이터 가져오기 및 캐싱 라이브러리

React Query는 서버 상태의 캐싱, 동기화 및 업데이트를 처리하므로 데이터를 쉽게 가져오고, 업데이트하고, 캐시할 수 있습니다. React Query의 자동 데이터 캐싱 및 다시 가져오기 기능은 복잡한 애플리케이션에 널리 사용됩니다.

예

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

const FetchExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key="{item.id}">{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

React 쿼리의 이점

• 데이터 캐싱 및 배경 새로고침.
• API와 원활하게 통합되며 네트워크 오류에 대한 재시도 논리를 처리합니다.
• 로드, 오류 및 다시 가져오기 상태를 관리하기 위한 코드가 줄어듭니다.

---

5. Vercel의 SWR(Stale-While-Revalidate)

SWR은 캐시 및 재검증 전략을 우선시하는 또 다른 데이터 가져오기 라이브러리입니다. Vercel에서 개발한 SWR은 사용자가 페이지를 다시 방문할 때마다 백그라운드에서 자동으로 데이터를 다시 가져와 최신 상태로 유지합니다.

예

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

const AxiosExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key="{item.id}">{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

SWR의 이점

• 자동 백그라운드 유효성 재검사와 함께 캐시 우선 데이터 가져오기를 사용합니다.
• 인기 있는 백엔드 프레임워크 및 RESTful API와 통합됩니다.
• 최소한의 코드로 데이터를 최신 상태로 유지해야 하는 애플리케이션에 이상적입니다.

---

6. GraphQL로 데이터 가져오기

GraphQL은 반환된 데이터를 더 효과적으로 제어할 수 있는 API용 쿼리 언어입니다. 필요한 필드만 가져올 수 있어 초과 가져오기 또는 부족 가져오기를 줄여 성능을 향상할 수 있습니다.

Apollo 클라이언트의 예

Apollo 클라이언트를 시작하려면 npm install @apollo/client graphql을 실행하여 설치하세요.

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    setData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

GraphQL의 이점

• 검색된 필드를 제어하여 보다 효율적인 데이터 가져오기를 가능하게 합니다.
• 네트워크 부하를 줄여주며 특히 복잡하거나 중첩된 데이터에 유용합니다.
• Apollo Client와 같은 라이브러리와 잘 통합되어 개발자 경험을 향상시킵니다.

---

결론

React에서 데이터를 가져오는 올바른 방법을 선택하는 것은 프로젝트의 복잡성, 성능 요구사항, 라이브러리 및 도구에 대한 선호도에 따라 다릅니다. 다음은 간단한 요약입니다.

• Fetch API: 소규모 프로젝트에 적합합니다. 내장되어 있고 최소한입니다.
• Axios: 더 나은 오류 처리 기능을 갖춘 고급 HTTP 클라이언트
• Async/Await: 비동기 코드의 가독성과 관리성을 향상합니다.
• React Query: 캐싱, 백그라운드 다시 가져오기 및 서버 상태 관리에 탁월합니다.
• SWR: 재검증 중 오래된 전략으로, 새로운 데이터를 가져오는 데 이상적입니다.
• Apollo를 사용한 GraphQL: 특정 필드가 필요한 복잡한 데이터 요구 사항에 가장 적합합니다.

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