ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • fetch 함수와 활용예제.
    Study/React 2020. 7. 14. 20:23

    fetch 함수


    fetch함수는 API를 사용하여 백엔드 서버와 비동기 요청을 하는 방식 중 하나이다. 

     

    • Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는 것이 가능하다.
    • 또한 fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기 쉽게 기술할 수 있다.
    • fetch를 통해 http통신의 요청과 응답에 대한 이해, Promise 공부를 해야한다.

     

    Basic

    기본적인 fetch 작성법

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

     

    위의 기본 fetch 작성을 함수 선언식으로 바꾼다면 아래와 같다.

     

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

     

     

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

     

    fetch() 함수에서 default method는 get이다.

    그래서 위의 코드는 get으로 호출한 것이다. 

     

    아래와 같은 api명세를 보고 어떻게 fetch()를 사용하면 되는지 작성해보자.

     

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

     

    호출하려면 아래와 같다.

     

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

     

    그런데 api주소를 보니 user뒤에 있는 3이 아마도 user id인 것 같다. 

    고정된 api라면 그냥 자바스크립트에서 고정해서 사용하면 되는데 위와 같이 api 주소를 상황에 맞게 유동적으로 바꿔줘야 할 때가 많다.

     

    리엑트를 한다고 가정하면 아래와 같이 구현할 수 있다.

     

    import React, { Component } from 'react';
    
    class User extends Component {
      componentDidMount() {
        // user id가 props를 통해 넘어온다고 가정
        const { userId } = this.props;
        
        fetch(`http://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 정보를 인자로 넘겨주어야 한다.

     

    api가 get인지 post인지는 api를 개발한 백엔드 개발자에게 물어보아야 한다.

     

     

    이번에는 아래와 같은 api 명세를 받았다고 해보자.

     

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

     

    아래와 같이 구현할 수 있다.

     

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

    1. fetch 함수의 두 번째 인자에 method와 body를 보내주어야 한다.

    2. method는 post이다.

    3. body는 JSON 형태로 보내기 위해 JSON.stringify() 함수에 객체를 인자로 전달하여 JSON 형태로 변환했다.

     

    post로 데이터를 보낼 때 JSON.stringify를 항상 하다보니 axios는 굳이 감싸주지 않고 객체만 작성해도 되는 편리함이 있다. 

    (참고로 이전 글에서 작성했듯이, axios는 json변환을 시키지 않아도 된다.)

    이렇듯 axios는 소소하게 편리한 설정을 제공해주고, 요청과 응답에 대한 확장성 있는 기능을 만들 수 있다.

     

     

    fetch() 함수 - method가 get인데 parameter를 전달해야 하는 경우

     

    위의 get 예제에서 우리는 3이라는 user id를 path로 넘겨주었다. 

    그런데 path말고 query string으로 넘겨줘야 할 수도 있다.

     

    언제는 path, 언제는 query string으로 할 수 있다는 말은 아니고,

    예제이다 보니 같은 api를 사용했다. 데이터를 전달하는 방식 또한 백엔드 개발자에게 물어보아야 한다.

     

     

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

     

    사실 특별한 것은 없다. api주소 뒤에 그냥 붙여주면 된다.

     

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

     

     

    Headers

    headers 인터페이스에서 Headers() 생성자를 사용해 헤더 객체를 생성할 수 있다.

    const content = "Hello World!";
    const awesomeHeaders = new Headers();
    awesomeHeaders.append("Content-Type", "application/json");
    awesomeHeaders.append("Content-Length", content.length.toString());
    
    //객체 리터럴을 생성자에 전달하는것으로 생성할수도 있습니다.
    const awesomeHeaders = new Headers({
      "Content-Type": "application/json",
      "Content-Length": content.length.toString()
    });

     

     

     

    method

    method는 GET, POST, DELETE 등이 있는데

    GET은 어떠한 정보를 가져올 때 ,

    POST는 어떠한 정보를 백에 보낼 때,

    DELETE는 단어 그대로 삭제할 때 사용한다. 

     

    메서드의 디폴드 값은 GET이기 때문에 아무런 정보를 적지 않으면 GET으로 적용된다.

    아래에는 로그인을 할 예정이기 때문에 정보를 보내는 POST 메서드를 사용했다.

     

    headers

    API 응답에 대한 헤더 정보를 담고 있다.

     

    body

     

    전달하고자 하는 응답 내용이다. 백과 통신할 때는 객체로 통신하기 떄문에 객체 타입으로 작성해야 한다. 

    method, headers, body는 전달하고자 하는 정보에 대한 정보이기 때문에 

    정보를 가져올 때, 즉 get하는 경우에는 작성해 줄 필요는 없다.

     

     

     

     

     

     

     

     

    참조: https://velog.io/@ppl8709/TIL-3-fetch-%ED%95%A8%EC%88%98

    댓글

Designed by Tistory.