자바스크립트 - 리액트에서 백엔드와 프론트엔드가
서로 통신을 주고받기 위한 메서드로 Fetch 를 사용한다.
아래와 같이 사용한다.
fetch("백엔드 주소",{
method : "~~~",
headers: {
'Content-Type': 'application/json',
},
body : JSON.stringify({데이터})
})
.then(res => res.json())
.then(res => console.log(res))상단부터 해석해서 내려와보자.
Fetch
fetch().then().then()크게보면 이렇게 세가지 함수로 구성되어있다.
제일 첫번째 함수인 fetch 부터 분석해보자.
fetch(("백엔드 주소"),{method:"",headers:"",body:""})fetch 함수에는 크게 두가지 인자를 받는다.
백엔드주소, 전달할 내용
전달할 내용은 객체 형태로 전달되는데
key로 전달되는 내용은
method , mode , cache , credentials , headers , redirect , referrerPolicy , body 등이 있지만
이중에서 자주 쓰이는 key는 method , headers , body 가 있다.
method
메소드에 사용되는 종류는
GET , POST , DELETE , PUT , PATCH 등이 있다.
GET 메소드는 백엔드 서버에서 어떤 데이터를 가져올 때 사용된다.
fetch 함수의 기본값이며 따로 method : "GET" 으로 지정해주지 않아도된다.
fetch("백엔드 주소/users/1")
.then((response) => response.json())
.then((data) => console.log(data))=>백엔드에서 1번유저의 정보를 넘겨주면
=> json 형태로 변환한뒤
=> console.log로 json객체를 출력하는 코드이다.
POST 메소드는 어떤 데이터를 서버에 저장할 때 사용한다.
fetch("백엔드주소/users", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
userId: 1,
userName: "gilDong",
userSex: "Male"
}),
})
.then((response) => response.json())
.then((data) => console.log(data))본인의 경우는 headers 옵션을 적어주지 않으면
json 형식을 읽지 못해서 오류가 발생했었다.주의할 점은
POST메서드는 IDEMPOTENT 라는 성질이 결여되어있다.
번역하자면 멱등성 이라는 성질인데 여러번 수행해도 결과가 같다는 의미이다.
해당 성질이 결여되어있는POST메서드는 여러번 사용하면 중복된 정보가 여러번 추가된다.
사용에 있어서 주의를 기울여야 한다.
=> JSON.stringify 를 이용해서 서버에 POST 요청을 보내는 유저정보를
JSON 포맷으로 전달한다.
PUT 메소드는 백엔드 서버에 있는 정보를 수정할 때 사용한다.
하지만 주의할 점이 있다.
fetch("백엔드주소/users/1", {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
userName: "gilDong2",
}),
})
.then((response) => response.json())
.then((data) => console.log(data))요청에 담긴 body를 보면 userName만 PUT 하고있다.
이렇게되면 1번유저의 정보중 나머지 userSex: "Male" 정보가 Null 값이 되어버린다.
PUT 메소드로 정보를 수정하려면 변경되지 않는 데이터까지 전부 명시해서 요청해야한다.
PATCH 메소드는 put과는 달리 수정하고자 하는 정보만 전달해줘도
나머지 원본 데이터가 훼손되지 않는다.
DELETE 메소드는 사용하기 간단하다.
fetch("백엔드주소/users/1", {
method: "DELETE",
})
.then((response) => response.json())
.then((data) => console.log(data))삭제하고자 하는 URI주소를 기입하고 메소드에 "DELETE"를 주면 끝이다.
=> 1번 유저의 데이터가 삭제된다.
