React에서 데이터 가져오기-JS 튜토리얼-php.cn

Data Fetching in 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);
  }
};

로그인 후 복사