[React] ajax로 이해하는 fetch()

제목을 거창하게 붙였지만 별 건 없습니다. 이해하기 어려운 두 개를 한 번에 이해해 보려는 거창한 시도입니다. 거창한 시도가 언제나 거창한 결과를 산출해 내는 것은 아니지만 지금은 미약한 결과일지라도 너무 소중한 시기입니다.

그래서 ajax가 뭔가요

ajax란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말합니다. 간단히 말해서, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말합니다.

ajax를 이용해서 JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있습니다. ajax의 강력한 특징은 페이지 전체를 새로 고침하지 않고서도 수행 되는 "비동기성"입니다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다.

정리하자면, ajax는 클라이언트에서 서버로 새로고침 없이 데이터를 요청을 할 수 있게 도와주는 일종의 자바스크립트 코드입니다.

여기서 기본 개념에 대한 정리가 있겠습니다.
우선, 백앤드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답받습니다.

클라이언트는 서버에서 정보를 가져와서 사용자에게 보여줄 수 있는, 사용자와 상호작용하는 소프트웨어입니다.


서버는 네트워크 상에서 접근할 수 있는 프로그램으로서 어떤 자료들에 대한 관리나 접근을 제어해주는 프로그램입니다. 클라이언트가 요청을 하면 서버가 데이터를 갖다 줍니다.


요청은 서버에 요청하는 방법을 뜻합니다. 요청 방법에는 GET, POST 등이 있습니다.
GET : 데이터, 웹페이지 등을 읽고 싶을 때 하는 요청입니다.
POST : 데이터를 서버로 보내고 싶을 때 하는 요청입니다.

fetch() 함수의 기본 형태

fetch() 함수의 기본 형태입니다.

fetch('api 주소')
  .then(res => res.json())
  .then(res => {
    // data를 응답 받은 후의 로직
  });

함수 선언식 형태는 이렇습니다.

fetch('api 주소')
  .then(function(res) {
    return res.json();
  })
  .then(function(res) {
    // data를 응답 받은 후의 로직
  });

fetch() 함수에서 default method는 get입니다. 어떤 url로 요청할 지를 함수의 첫 번째 인자에 넣어주시면 됩니다.

fetch() 함수 - method가 get인 경우

아래와 같은 api 명세서를 받았다고 가정합니다.

설명: 유저 정보를 가져온다.
base url: https://api.google.com
endpoint: /user/3
method: get
응답형태:
    {
        "success": boolean,
        "user": {
            "name": string,
            "batch": number
        }
    }

리액트 개발환경에서 method가 get인 경우 fetch() 함수의 형태는 다음과 같습니다. userId는 api 주소에 따라서 유동적인 경우가 많기 때문에 이렇게 구현해 주었습니다.

import React, { Component } from 'react';

class User extends Component {
  componentDidMount() {
    // user id가 props를 통해 넘어온다고 가정
    const { userId } = this.props;

    fetch(`https://api.google.com/user/${userId}`)
      .then(res => res.json())
      .then(res => {
        if (res.success) {
            console.log(`${res.user.name}` 님 환영합니다);
        }
      });
  }
}

fetch() 함수 - method가 post인 경우

fetch()의 기본은 get이기 때문에 아무것도 작성하지 않아도 get으로 호출한 반면, post인 경우에는 fetch() 함수에 method 정보를 인자로 넘겨주어야 합니다.

설명: 유저를 저장한다.
base url: https://api.google.com
endpoint: /user
method: post
요청 body:
    {
        "name": string,
        "batch": number
    }

응답 body:
    {
        "success": boolean
    }

위와 같은 api를 받아서 아래와 같이 구현합니다.

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        alert("저장 완료");
    }
  })

method가 get일 때와 차이점이 있습니다.
1) 두 번째 인자에 method와 body를 보내주었으며,
2) method를 post로 지정해 주었고,
3) body는 JSON 형태로 보내기 위해 JSON.stringfy() 함수에 객체를 인자로 전달하여 JSON 형태로 변환했습니다.

JSON.stringfy를 매번 해줘야 하나요? 정답은 옙....

fetch()에서는 post로 데이터를 보낼 때 JSON.stringfy를 항상 실행해주어야 합니다. But, axios는 굳이 감싸주지 않고 객체만 작성해 주어도 됩니다. 이렇듯 axios는 소소하게 편한한 설정을 제공해주고, 요청과 응답에 대한 확장성 있는 기능을 만들 수 있습니다.