React에서 서버로 요청 보내기

대표 친구의 의뢰에 api 요청을 연습했다.
React에서 서버로 요청을 보내는 방법은 크게 fetch와 axios 라이브러리를 이용한다.
나는 자바스크립트 내장 Web API 인 fetch를 이용해 연습해봤다.

우리의 벡엔드 친구들이 장고 서버 구축 연습을 하고있다.
내 전용 api 요청 연습 서버가 생겼다ㅋㅋ

fetch api

fetch는 Promise 기반의 함수이다.

fetch('api 주소')
.then(res => res.json())
.then(res => {
});

위 코드는 fetch 함수의 기본이다.
주소로 요청을 보내고 응답이 res 객체에 담겨 promise가 resolve 한 상태가 되면 then 메서드가 실행된다.
첫 번째 then 에서는 응답을 저장하고 있는 res를 json형태로 바꿔준다.
두 번째 then 에서는 data를 응답 받은 후의 로직을 작성한다.
fetch 는 매개변수로 http 요청 메서드와 콘텐츠 타입, body등을 받는다.
http 메서드를 지정해주지 않으면 기본으로 GET 요청을 보낸다.
위 코드는 해당 주소로 GET 요청을 보낸 모습이다.

친구가 미리 저장해놓은 JSON이다.
프로퍼티가 id, product_name, price 인 것을 볼 수 있다.

이제 여기다가 POST 요청을 보내보자.
POST 요청을 보내려면 method를 지정해주어야 한다.

위 코드처럼 메소드를 POST로 지정해준다.
POST는 리소스를 보낼 body 객체가 있어야 한다.

headers 옵션으로 리소스를 보낼 Content를 json으로 보내기로 한다.

body는 리소스를 보낼 때 JSON으로 변환해서 보낸다. 백엔드에 저장되어있는 JSON 대로 id, product_name,price를 보내보자.

이후는 GET에서와 같이 요청이 성공했으면 해당응답을 console.log로 확인할 수 있다.

오호라,, 새로고침을 여러번 했더니 요청이 너무 많이 갔나보다.
난 12로 요청을 보냈는데, 이미 12가 존재하니까 id를 알아서 +1 해서 요청을 보냈나보다.

해당 주소로 접속해보면 json 리스트를 깔끔하게 볼 수 있다.
장고에서 지원하는 기능이라고 한다.
사진을 보면 id 6 부터 내가 보낸 post 요청이 잘 전송되었음을 확인할 수 있다.