#19 Rest API - axios

https://axios-http.com/

Axios

Axios란?

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다.

 

설치:
$ npm install axios

jsDelivr CDN 사용하기:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

unpkg CDN 사용하기:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 

Axios를 react에서 사용하는 방법

https://www.geeksforgeeks.org/axios-in-react-a-guide-for-beginners/

Axios in React: A Guide for Beginners - GeeksforGeeks

 

1. GET Request

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

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

  useEffect(() => {
    // Make GET request to fetch data
    axios
        .get("https://jsonplaceholder.typicode.com/posts")
        .then((response) => {
          setData(response.data.filter((b)=> b.id<=10)); // 목록이 많아서 10개로 짜름
          setLoading(false);
        })
        .catch((err) => {
            setError(err.message);
            setLoading(false);
        });
  }, []);

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

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

export default BlogList;

• State Management: 구성 요소는 useState를 사용하여 세 가지 상태를 관리합니다. data(가져온 데이터 저장), loading(데이터가 아직 로드 중인지 추적), error(데이터를 가져오는 동안 발생하는 모든 오류 처리).
• Data Fetching with Axios: useEffect 후크 내부에서 axios.get을 사용하여 URL https://jsonplaceholder.typicode.com/posts에서 게시물을 페치하는 API 요청이 이루어집니다. 응답은 data에 저장되고 페치가 완료되면 loading이 false로 설정됩니다.
• Conditional Rendering: 데이터가 아직 로드 중이면 "로딩 중..."을 표시합니다. 오류가 발생하면 오류 메시지를 표시합니다. 그렇지 않으면 페치된 데이터에서 게시물 제목 목록을 렌더링합니다.
•  

 

 

2. POST Request

import React, { useState } from "react";
import axios from "axios";
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import styled from 'styled-components';

const WriteBox = styled.div`
  width: 100%;
  justify-content: center;
  margin: auto;
  padding: 10px;
`;

const CreatePost = () => {
    const [title, setTitle] = useState("");
    const [body, setBody] = useState("");
    const [responseMessage, setResponseMessage] = useState("");

    const handleSubmit = (event) => {
        event.preventDefault();
        const newPost = {
            title,
            body,
        };

        // Make POST request to send data
        axios
          .post("https://jsonplaceholder.typicode.com/posts", newPost)
          .then((response) => {
              setResponseMessage("Post created successfully!");
          })
          .catch((err) => {
              setResponseMessage("Error creating post");
          });
    };

    return (
        <WriteBox>
            <h2>Create New Post</h2>
            <Form onSubmit={handleSubmit}>
              <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
                <Form.Control 
                  type="text" 
                  placeholder="Post Title"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                />
              </Form.Group>
              <Form.Group className="mb-3">
                <Form.Control as="textarea" rows={3} 
                  placeholder="Post Body"
                  value={body}
                  onChange={(e) => setBody(e.target.value)}
                  />
              </Form.Group>
              <Button type="submit">Create Post</Button>
            </Form>
            {responseMessage && <p>{responseMessage}</p>}
        </WriteBox>
    );
};

export default CreatePost;

• 상태 관리: 구성 요소는 useState를 사용하여 제목, 본문 및 responseMessage 상태를 관리합니다. 여기에는 사용자 입력과 API의 응답 메시지가 저장됩니다.
• Form Handling and POST Request : 양식 제출(handleSubmit) 시, 제목과 본문을 포함한 새 게시물 객체가 생성되고, axios.post를 사용하여 API로 데이터를 전송하기 위한 POST 요청이 이루어집니다.
• 응답 처리: 요청 후 성공하면 성공 메시지가 표시됩니다(" Post created successfully! "). 오류가 있으면 오류 메시지가 표시됩니다 (" Error creating post ").

 

 

 

React에서 Axios를 사용하기 위한 모범 사례

• async/await와 함께 Axios를 사용하세요. 
• 더 깔끔한 코드를 원하시면 Axios와 함께 async/await를 사용하는 것을 고려하세요.

const fetchData = async () => {
    try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        setData(response.data);
    } catch (error) {
        setError(error.message);
    }
};

 

• Axios 인스턴스 사용: 확장성과 쉬운 구성을 위해 여러 구성 요소에서 재사용할 수 있는 Axios 인스턴스를 만들 수 있습니다.

const axiosInstance = axios.create({
    baseURL: "https://jsonplaceholder.typicode.com",
    timeout: 1000,
});

axiosInstance
    .get("/posts")
    .then((response) => {
        console.log(response.data);
    })
    .catch((error) => {
        console.error(error);
    });

• 로딩 상태 처리: 사용자가 데이터를 기다리는 동안 피드백을 받을 수 있도록 UI에서 로딩 및 오류 상태를 항상 처리하세요.

Axios의 응답 객체

서버에 요청을 보내면 아래에 주어진 속성을 갖는 서버로부터 응답 객체를 받습니다.

• data: 서버에서 페이로드 형태로 데이터를 수신합니다. 이 데이터는 JSON 형태로 반환되고 JavaScript 객체로 다시 파싱되어 사용자에게 전송됩니다.
• status: 서버에서 반환된 HTTP 코드를 받습니다.
• statusText: 서버에서 반환된 HTTP 상태 메시지입니다.
• headers: 모든 헤더는 서버로부터 다시 전송됩니다.
• config: 원래 요청 구성.
• request: 실제 XMLHttpRequest 객체.

오류 객체

요청에 문제가 있는 경우 오류 객체를 받게 됩니다. Promise는 지정된 속성을 가진 오류 객체와 함께 거부됩니다.

• message: 오류 메시지 텍스트. 
• response: 응답 객체(수신된 경우). 
• request: 실제 XMLHttpRequest 객체(브라우저에서 실행하는 경우). 
• config:  원래 요청 구성. 

결론

Axios는 React 애플리케이션 에서 API 요청을 간소화하는 강력하고 사용하기 쉬운 HTTP 클라이언트 입니다. 자동 JSON 구문 분석 , 요청 및 응답 인터셉터 , 오류 처리 와 같은 기본 제공 기능을 갖춘 Axios는 React 프로젝트 에서 HTTP 요청을 처리하기 에 좋은 선택입니다 .

 

 

추가 참고 문서

https://ramincoding.tistory.com/entry/React-Axios-%EA%B0%84%EB%8B%A8%ED%95%98%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[React] React 에서 Axios 사용하기