[React] react에서 비동기 처리하기 (fetch, axios)

fetch

window object에서 정의되어 있으며, fetch는 ES6부터 Javascript의 내장 라이브러리로 들어왔다.

promise기반으로 만들어졌으며, 별도의 설치 없이 모던 브라우저에서 사용 가능하다.

 

    useEffect( () => {
      fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(data => setData(data))
    },[])

    useEffect(() => {
        const getData = async () => {
        const res = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await res.json()
        setData(data);
        };
        getData();
    }, []);

 

axios 

별도의 설치 및 import가 필요하다.

과정이 어렵지 않으며 사용하기도 쉬워 많은 개발자들이 사용하고 있는 라이브러리이다.

비동기로 HTTP 통신을 가능하게 해주며, return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽다.

 

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
        .then(res => setData(res.data))
  }, []);

  useEffect(() => {
    const getData = async () => {
      const res = await axios.get("https://jsonplaceholder.typicode.com/posts");
      setData(res.data);
    };
    getData();
  }, []);

 

 

Axios와 fetch의 차이점

 

Axios	Fetch
써드파티 패키지로 설치 쉬움	Built-in APIs 로 별도의 설치 필요 없이, 모던 브라우저에서 사용 가능.
wide browser 지원	오직 크롬 42+, firefox 39+, edge 14+, safari 10.1+ 지원.polyfill 이용해서 하위 호환성 지원 가능
XSRF Protection 보안 기능 제공	없음.
자동 JSOM 데이터 변환 지원	JSON 데이터 핸들링 위해 추가 절차 필요. Fetch interface 의 json() 이용하는 로직 추가하여 가능
Request 취소 와 Request Timeout 설정 가능	없음. AbortController 이용하여 구현 가능
HTTP Requests 의 Intercept 가능	Intercept Requests 기본적으로 제공되지 않음. Global Fetch Method를 Overwrite 하여 나의 인터셉터 정의 가능
Download Progress 지원	Upload Progress 지원안함.  Response Object의 Body Property 통해 제공되는 ReadableStream 인스턴스 이용 가능

 

 

<참고자료>

 

https://yeonfamily.tistory.com/10

 

Javascript | Fetch vs Axios 차이점 비교

 

 

<전체코드>

 

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

const Test10 = () => {
  const [data, setData] = useState([]);

    useEffect(() => {
        const getData = async () => {
        const res = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await res.json()
        setData(data);
        };
        getData();
    }, []);

    // useEffect( () => {
    //   fetch('https://jsonplaceholder.typicode.com/posts')
    //   .then(res => res.json())
    //   .then(data => setData(data))
    // },[])

  //   useEffect(() => {
  //     axios.get('https://jsonplaceholder.typicode.com/posts')
  //         .then(res => setData(res.data))
  //   }, []);

//   useEffect(() => {
//     const getData = async () => {
//       const res = await axios.get("https://jsonplaceholder.typicode.com/posts");
//       setData(res.data);
//     };
//     getData();
//   }, []);

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

export default Test10;