리액트 fetch( )를 이용하여 API 호출하기

맥쌤 수업 내용

브라우저가 화면에 요청을 하면 Front-End 서버 (리액트)가 그 요청을 받고
데이터는 Back-End 서버에서 (백엔드 서버_Java, Spring, DB) 받아옵니다.

어떻게 요청을 받느냐면
REST API로 요청을 받습니다.
Front에서 Back으로 요청을 보낼 때에 REST API를 이용하는 것이죠!

reponse로 JSON 데이터를 받습니다.

데이터를 받으면 변화가 생기니까 Front에서는 랜더링이 발생하죠!
(rendering)

이런 구조로 개발을 해야 한다는 맥선생님의 말씀!

 

💡fetch()란?

웹에서는 클라이언트와 서버가 http 프로토콜을 통해 요청과 응답을 주고받습니다.

http에서 사용하는 방식은 여러 가지가 있지만, GET과 POST를 가장 많이 사용합니다.

GET은 데이터를 조회해 가져와 사용하는 것입니다.

자바스크립트 내장 객체 (API 호출하는 역할)
fetch() 함수는 엄밀히 말해, 브라우저의 window 객체에 소속되어 있기 때문에 window.fetch()로 사용되기도 한다.

 

자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있죠.

이는 HTTP 요청에 최적화되어있고 상태도 잘 추상화되어있고, promise를 기반으로 되어있기 때문에

상태에 따른 로직을 추가하고 처리하는데 최적화 되어으며,
네트워크 요청은 다음과 같은 경우에 이루어진다.
-주문전송
-사용자 정보 읽기
-서버에서 최신 변경문 가져오기 등등
그런데 이 모든 것들은 페이지 새로 고침 없이도 가능합니다.

 

💡fetch() 기본 문법

let promise = fetch(url, [options])
url-접근하고자 하는 URL
options - 선택 매개변수, mehtod나 header 등을 지정할 수 있습니다.

fetch('url')
.then(response => response.json())
.then(response => data.filter(item => item.isRequired));

fetch 함수는 API를 사용하여 백엔드 서버와 비동기 요청을 하는 방식 중 하나입니다.
fetch API는 3개의 interfeace를 도입하고 있는데 Headers, Request, Response입니다.

---

🤍headers => Headers 객체는 HTTP header와 대응되는 객체입니다.

 

🤍Request => Request는 HTTP요청을 통해 자원을 가져오는 인터페이스입니다.

🤍Request는 URL, Header, Body가 필요합니다.

그리고 Request에 대한 mode제한과 certidicate 관련 설정도 추가할 수 있습니다.

Request 객체의 첫 번째 인자는 호출한 Path가 들어가고,

두 번째 인자에는 Request에 대한 정보가 들어갑니다.

• method
• headers
• body
• 등등...

method

Method는 HTTP method와 동일한 스펙으로 들어가면 된다. GET/POST/HEAD/PUT/DELETE/OPTION/PATH 등등

GET은 어떠한 정보를 가져올 때,
POST는 어떠한 정보를 백에 보낼 때,
DELETE는 단어 그대로 삭제할 때 사용합니다.
메서드의 디폴트 값은 GET이기 때문에 아무런 정보를 적지 않으면 GET으로 적용됩니다.
그리고 소문자로 지정해도 자동으로 대문자로 Uppercase 됩니다.

 

headers

headers는 Request Header를 지정해 주는 곳인데, 2가지 형식으로 넣을 수 있다.
Object lireral과 Headers 객체의 인스턴스를 넣을 수 있다.

const req = new Request('/api/posts', {
  method: "GET",
  headers: {
    'content-type': 'application/json',
  }
});
const req2 = new Request('/api/posts', {
  method: 'GET',
  headers: new Headers({
   'content-type': 'application/json',
  })
})

body

body는 HTTP Request에 실을 데이터인데 여러 가지 타입을 넣을 수 있습니다.
즉, 전달하고자 하는 응답 내용이죠.

백엔드와 통신할 때는 객체로 통신하기 때문에 객체타입으로 작성해야 합니다.

Response

Response는 fetch를 호출하면 가져올 수 있는 객체입니다.

status

status는 HTTP response Code를 담고 있다. 일반적으로 성공적이었다면 200이 떨어지게 될 것입니다..

 

---

💡 fetch get 호출하기

웹에서는 클라이언트와 서버가 http 프로토콜을 통해 요청과 응답을 주고받습니다.

http에서 사용하는 방식은 여러 가지가 있지만, GET과 POST를 가장 많이 사용하며,

GET은 데이터를 조회해 가져와 사용하는 것입니다.

 

💡 fetch post 호출하기

GET이 데이터를 조회해 가져와 사용하는 용도로 사용한다면,

POST는 서버의 상태나 데이터를 변경하는 등의 수행 작업에 사용됩니다.

 

데이터를 전달하여 서버 쪽에서 업데이트하는 용으로 사용하곤 합니다.

 

💡 axios get 사용하기

axios도 fetch와 마찬가지로 비동기 통신을 지원하며,

axios는 fetch와 달리 별도로 설치한 후 임포트해 사용해야 합니다.

 

 

참고

 

[React axios] React의 axios 기본 :: axios로 GET, POST, PUT, DELETE 요청 보내기

 

수고하셨습니다.