가져오기 및 Axios를 사용하여 React에서 REST API를 통합하는 방법-JS 튜토리얼-php.cn

가져오기 및 Axios를 사용하여 React에서 REST API를 통합하는 방법

Susan Sarandon

풀어 주다： 2024-12-25 20:15:23

원래의

622명이 탐색했습니다.

How to Integrate REST APIs in React with fetch and Axios

React의 REST API 통합

REST API를 React 애플리케이션에 통합하는 것은 웹 개발자의 일반적인 작업입니다. REST(Representational State Transfer)는 GET, POST, PUT, DELETE 등과 같은 HTTP 메서드를 통해 외부 리소스(데이터)와 상호 작용할 수 있는 아키텍처 스타일입니다. React를 사용하면 REST API와 쉽게 통합하여 데이터를 가져올 수 있습니다. , 새로운 데이터를 게시하고 다양한 API 응답을 효율적으로 처리합니다.

이 가이드에서는 Fetch API, Axios 및 비동기 데이터 가져오기 처리와 같은 다양한 방법을 사용하여 REST API를 React 앱에 통합하는 방법을 살펴보겠습니다.

1. REST API에서 데이터 가져오기

Fetch() 함수는 JavaScript에 내장되어 있으며 HTTP 요청을 수행하는 간단한 방법을 제공합니다. 요청에 대한 응답을 나타내는 Response 객체로 해석되는 Promise를 반환합니다.

React에서 fetch API 사용하기

다음은 fetch API를 사용하여 REST API에서 데이터를 가져와 React 구성 요소에 표시하는 간단한 예입니다.

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example REST API

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

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

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

로그인 후 복사

useState: 게시물, 로드 상태, 오류 메시지를 저장하는 데 사용됩니다.
useEffect: 구성요소가 마운트될 때 데이터 가져오기를 처리합니다.
fetch(): REST API 엔드포인트에서 데이터를 가져온 다음 JSON 형식으로 처리합니다.
오류 처리: 오류(예: 네트워크 문제)를 포착하고 오류 상태를 설정합니다.

2. API 요청에 Axios 사용

Axios는 브라우저와 Node.js를 위한 약속 기반 HTTP 클라이언트입니다. 이는 가져오기의 대안이며 깔끔한 구문과 자동 JSON 변환, 요청 취소 등과 같은 추가 기능으로 인해 선호되는 경우가 많습니다.

Axios 설치

Axios를 사용하려면 먼저 npm을 통해 설치하세요.

npm install axios

로그인 후 복사

Axios를 사용하여 데이터 가져오기

위와 동일한 예이지만 Axios를 사용합니다.

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts';

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API using Axios
    axios
      .get(API_URL)
      .then((response) => {
        setPosts(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

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

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

로그인 후 복사

axios.get(): REST API에서 데이터를 가져옵니다. Axios는 자동으로 응답을 JSON으로 구문 분석합니다.
오류 처리: 오류가 있으면 이를 잡아 컴포넌트에 표시합니다.

3. REST API로 데이터 보내기(POST 요청)

GET 요청 외에도 POST 요청을 사용하여 서버에 데이터를 보낼 수 있습니다. 이는 일반적으로 양식을 제출하거나 새 기록을 생성하는 데 사용됩니다.

POST 요청에 가져오기 사용

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example REST API

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

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

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

로그인 후 복사

POST 요청: 데이터를 JSON 형식으로 API에 보냅니다. 이 경우 제목과 본문을 포함하여 새 게시물을 보내드립니다.
JSON.stringify(): JavaScript 개체를 요청 본문에 대한 JSON 문자열로 변환합니다.

POST 요청에 Axios 사용

npm install axios

로그인 후 복사

axios.post(): API에 POST 요청을 보냅니다. 요청 본문에는 전송할 데이터가 포함되어 있습니다.

4. 결론

REST API를 React 애플리케이션에 통합하는 것은 현대 웹 개발에 있어 중요한 기술입니다. fetch()를 사용하든 Axios와 같은 라이브러리를 사용하든 React는 API 요청을 관리하고 응답에 따라 UI를 업데이트하기 위해 useEffect 및 useState와 같은 강력한 후크를 제공합니다. 데이터를 가져오고, 보내고, 오류를 정상적으로 처리하여 원활한 사용자 경험을 보장할 수 있습니다.

위 내용은 가져오기 및 Axios를 사용하여 React에서 REST API를 통합하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!