[Javascript] fetch요청

fetch란?

특정 정보가 필요할 때 클라이언트는 서버에 http통신으로 요청을 보내고, 정보를 응답받을 수 있다. 이때 사용되는 메서드가 fetch인데, fetch메서드로 데이터를 요청해서 받거나 생성, 수정, 삭제할 수 있다.(CRUD)

항상 클라이언트의 입장에서 서버에게 요청한다.

fetch메서드의 종류

GET, POST, PATCH, DELETE등이 있다.

단순 정보를 받아올 때는 GET, 정보를 입력할 때는 POST, 지울 때는 DELETE, 정보를 받아 수정해서 다시 게시할 때는 PATCH를 사용한다.

fetch사용법

fetch는 인자로 두가지를 갖는다. 첫 번째 인자로 api주소를 갖고 이 값은 필수로 들어간다. 두 번째 인자는 요청의 옵션 값들이다. 필요에 따라 객체의 형태로 넣을 수 있다.

예를 들면 다음은 회원가입요청

fetch('요청 api주소',{
	method : "POST", 
	headers : {'Content-Type': 'application/json;charset=utf-8',}, 
	body : {
	JSON.stringify({
		email : "유저 email",
		password : "유저 password",
	})
	}
})

데이터를 GET해서 가져올 때는 다음과 같이 쓴다.

import {useState, useEffect} from 'react';

//react예시
const [data, setData] = useState([]);

useEffect(()=>{
	fetch('요청 api주소',{
		method : "GET", 
		headers : {'Content-Type': 'application/json;charset=utf-8',}, 
	})
	.then(res=> res.json())
	.then(data=> setData(data));

},[])