[JavaScript] React - fetch()

React

백엔드로부터 데이터를 받아오려면 API를 호출 후 응답을 받아옵니다. 자바스크립트 Wep AIP fetch()함수를 쓰거나 axios 라이브러리를 사용할 수 있습니다. 이번 블로그에서는 fetch()함수에 다루도록 하겠습니다.

fetch() 함수 - GET

• Wep API는 클라이언트 측에서 사용할 수 있는 자바스크립트 내장함수 입니다.
• 실무에서는 axios를 사용하지만 fetch 대부분의 기능을 충분히 구현할 수 있습니다.

아래의 두 코드 중 첫번째 코드는 fetch 함수의 기본 형태입니다. 두번째 코드는 ES5의 선언식으로 바꿨을때의 fetch함수의 형태입니다. (메소드에는 아무것도 작성하지 않으면 default값은 GET 입니다.)
메소드는 서버에서 정해진 메소드 그대로 작성하여야 합니다.

fetch('api 주소' ,메소드)
  .then(res => res.json()) // .json은 많은 res 데이터 중에 자바스크립트 객체만 가져오는것
  .then(res => {	// 자바스크립트는 한줄 한줄 로직이 실행되는데 fetch부분에서 
  			// 오래걸리면 아무것도 하지 못하기 때문에 fetch 가 끝나기 전에라도 
  			//비동기로 먼저 .then을 실행시켜줍니다.
    // data를 응답 받은 후의 로직
  });

fetch('api 주소', 메소드)
  .then(function(res) {	
    return res.json(); // .json은 많은 res 데이터 중에 자바스크립트 객체만 가져오는것
  })
  .then(function(res) {
    // data를 응답 받은 후의 로직
  });

fetch() 함수 - POST

fetch()의 기본 default 메소드는 GET이기 때문에 위에서 아무것도 작성하지 않았지만 아래의 코드처럼 POST를 사용하기 위해선 메소드를 작성해주어야 합니다.

• 두번째 인자에 method와 body 값을 보내줍니다.
• POST 메소드에 body값을 JSON으로 보내기 위해 JSON.stringify() 함수에 객체를 인자로 전달하여 JSON형태로 변환하였습니다.

fetch('https://api.google.com/user', {
    method: 'post',			// 메소드는 POST를 사용한다.
    body: JSON.stringify({		// 자바스크립트의 값을 JSON 문자열로 변환한다.
        name: "yeri",			// 백엔드 서버의 key값 name, batch에다가 
        batch: 1			// 해당 데이터를 전송합니다.
    })
  })
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        alert("저장 완료");
    }
  })

fetch('api 주소', 메소드)
  .then(function(res) {
    return res.json(); // .json은 많은 res 데이터 중에 자바스크립트 객체만 가져오는것
  })
  .then(function(res) {
    // data를 응답 받은 후의 로직
  });