[React] Fetch & Axios

Fetch

Fetch 는 네트워크를 통해 리소스를 비동기적으로 가져오는 방법이며, 백엔드와 통신할 때 자주 사용한다.
기본적으로 내장되어 있기 때문에 설치할 필요가 없다.

Fetch의 기본 형태

fetch(url, [option])
    .then((response) => response.json())
    .then((data) =>  console.log(data));

Fetch는 두 개의 인자를 갖는다.

 

url
통신할 url을 지정한다.
이때 같은 포트의 localhost와 통신 할 경우 포트 번호 다음에 오는 url 주소를 입력하면 된다.
ex) '/login'
반면 다른 포트의 localhost와 통신 할 경우 url 전체 주소를 입력해야한다.
ex) 'http://localhost:8080/login'

 

option

• method: POST/GET/PUT/DELETE 설정, 설정하지 않을 경우 GET이 들어간다.
• headers: Request header를 지정, 보통 보낼 데이터가 json 형태임을 알려줄 때 사용한다.
• body: 전달할 데이터가 담기는 곳이다.
  등으로 이루어져있다.

응답은 Promise 형태로 전송되어 오기 때문에 이를 활용하려면 json 형태로 변환하는 과정이 필요하다.

Fetch 예제

① POST: 서버로 데이터 전송

//json 형식

const data = { id: "apple"};

fetch('http://localhost:3000/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then((response) => response.json())
.then((data) => {
  console.log('성공:', data);
})
.catch((error) => {
  console.error('실패:', error);
});


//form-data 형식

const formData = new FormData();

formData.append('id', 'apple');

fetch('http://localhost:3000/login', {
  method: 'POST',
  body: formData,
})
.then((response) => response.json())
.then((result) => {
  console.log('성공:', result);
})
.catch((error) => {
  console.error('실패:', error);
});

② GET: 서버로부터 데이터 받아오기

※ 데이터를 전송할 필요가 없으므로 매개변수로 url 만 포함하고 있다.

fetch('http://localhost:3000/login')
    .then((response) => console.log(response))
    .catch((error) => {
      console.error('실패:', error);
    });

Axios

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 비동기 통신 라이브러리이며, 설치해야 사용이 가능하다.

Axios 설치

// axios 설치 , package.json 에서 확인 가능
npm install axios

// 사용할 파일 내에서 import
import axios from "axios";

Axios 기본 문법

axios({
    url: ~,
    method: ~,
    data: {},
});

// 위의 형태를 응용하여 다음과 같은 형태로 쓰기도 한다.
axios.method('url', data, headers)

Axios는 객체로 인자를 받는데 그 안에 여러 가지 파라미터가 들어갈 수 있다.

주로 쓰는 파라미터로는

url: 통신할 주소
method: POST/GET/PUT/DELETE 설정, 설정하지 않을 경우 GET이 들어간다.
data: body에 실어보낼 데이터
※ withCredentials: 서로 다른 도메인에 요청을 보낼 때 자주 쓰이는 파라미터로, 이를 true 로 하면 cross-origin으로 쿠키 값을 전달 할 수 있다. 정상적으로 처리되기 위해서는 서버에서도 Access-Control-Allow-Credentials 등 과 같은 값을 처리를 해주어야 한다.

Response는 json 형태이기 때문에 바로 활용할 수 있다.

Response 형태 예시 (axios.post JSON)

Axios 예제

① POST: 서버로 데이터 전송

//json 형식

const data = { id: "apple"};

axios.post('http://localhost:3000/login', data, { 'Content-Type': 'application/json' })
.then((response) => console.log(response))
.catch((error) => {
  console.error('실패:', error);
});


//form-data 형식

const formData = new FormData();

formData.append('id', 'apple');

axios.post('http://localhost:3000/login', formData)
.then((response) => {
  console.log('성공:', response);
})
.catch((error) => {
  console.error('실패:', error);
});

② GET: 서버로부터 데이터 받아오기

※ 데이터를 전송할 필요가 없으므로 매개변수로 url 만 포함하고 있다.

axios.get('http://localhost:3000/login')
.then((response) => console.log(response))
.catch((error) => {
  console.error('실패:', error);
});

Async & Await

기본적으로 Fetch 와 Axios 는 비동기처리를 한다.

Async / Await 연산자는 then() 메서드 대신으로 사용하여 동기 코드처럼 보이게 작성할 수 있도록 한다.

기존 코드 (영화 관련 api 데이터 불러오는 코드)

useEffect(() => {
    //api 적용
    fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year")
    .then((response) => response.json())
    .then((json) => {
      setMovies(json);
      setLoading(false);
    });
}, [])

Async / Await 적용한 코드

const getMovies = async () => {
    //첫 번째 형태
    const response = await fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year")
    const json = await response.json();

    //두 번쨰 형태
    const json = await (
        await fetch(
            "https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year"
        )
    ).json();

    console.log(json.data.movies);
  }

  useEffect(() => {
    getMovies();
  }, [])

첫 번째 형태와 같이 연쇄적으로 await를 사용할 수도 있고,

두 번째 형태와 같이 await 를 감싸는 await를 사용할 수도 있다.