우리가 동적인 웹을 만드려면 서버에서 데이터를 가져와 시각화 하고, 시각화한 데이터를 웹사용자가 원하는대로 수정, 삭제, 인증 등의 과정이 있어야 웹사용자와 소통을 할 수 있다.
그렇기 위에 React에는 fetch라는 함수가 있는데, 내가 통신하는 서버와 통신 할 수 있게 도와준다.
기본 문법
저번 조건부 랜더링에서 간단히 설명했지만 state를 이용해 계속 랜더링 될 때마다 서버로 부터 데이터를 받아오면 매우 비 효율적인 구조가 될것이다. (항상 useEffect훅에 넣어주고 필요할때만 렌더링되도록 설정해보자!)
useEffect(()=>{
fetch('서버의 주소',{
method : 'GET,POST,DELETE,PATCH', // 기본값은 "GET" 이다!
headers: { authorization : 토큰 }, // 토큰등의 데이터가 들어간다.
body : JSON.stringify({
//객체 형식의 보내고싶은 내용! GET에서는 데이터를 가져오기만 하기때문에 body가 잘 안쓰임.
})
})
},[])이런 구조로 패치를 사용 할 수 있다!
이제 하나하나 살펴볼건데 오늘은 GET,POST,DELETE,PATCH 4가지를 다뤄보겠다.
GET
서버로 부터 데이터를 가져올때 사용한다.
인증이 필요하지 않은 데이터면 토큰값을 안주어도 되지만 마이페이지, 회원 전용 페이지 등의 로그인과정이 필요한 부분에서는 토큰값을 주어 데이터를 요청하여야 한다.
데이터 예시 (쇼핑몰에서 내가 찜한상품을 보고싶을때)
[
{
id : 1,
"상품" : "맥북프로",
"가격" : 3800000,
"사진" : "이미지 주소"
}, ...여러개
]이런식으로 데이터를 받아와 찜한상품을 보고싶을때 데이터를 가져와야한다.
useEffect(()=>{
fetch('서버의 주소',{
method : 'GET', // GET은 기본값이므로 안써줘도 작동한다.
headers: { authorization : 토큰 //토큰형식은 백엔드와 키값을 맞춰야합니다. }
// 찜한페이지는 로그인이 필요하기때문에 토큰을 전달해서 인증을 받아야함!
}) // 데이터를 받을때는 보내줄 데이터가 없기때문에 토큰만 전해준다!
.then(res => res.json())
// 서버에서 전송받은데이터를 자바스크립트의 형식으로 변경해준다고 생각해주세용
.then(data => setData(data))
// 우리가 페이지에서 사용 할 수 있도록 state훅에 저장~
},[])POST
서버에 새로운 데이터를 만들고 싶을때 사용하거나, 데이터가 맞는데이터인지 확인할때 사용한다.
새로운 데이터를 만들때 사용하지만 서버와 키값이 맞아야 생성이 가능함, 예를들어 서버에서 원하는 데이터는 아이디 비밀번호 인데 아이디,비밀번호,이메일 까지 주려고 하면 오류가 발생함.
위와 같이 데이터를 생성 가능하고 아이디 중복 확인 등 데이터가 이미 있는 데이터 인지 없는 데이터인지 검사 할 때도 POST 메서드로 데이터를 전송한다.
회원가입 및 로그인을 예로 들어보겠다!
useEffect(()=>{
fetch('서버의 주소',{
method : 'POST',
body : JSON.stringify({
id : 우리가 state훅에 저장한 id값, //
password : 우리가 state훅에 저장한 password값
})
// 여기서 id,password는 서버와 키값이 맞아야함! 서버 키가 user_id 이면 에러!!
}) // 회원가입 및 로그인에서는 토큰이 필요없다!
.then(res => res.json())
// 서버에서 전송받은데이터를 자바스크립트의 형식으로 변경해준다고 생각해주세용
.then(data => data.message === "SUCCESS"
? alert('회원가입성공!') : alert('회원가입실패...'))
// 서버에서 받은데이터 메세지가 "SUCCESS"이면 성공 아니면 실패...
},[])DELETE
서버에 저장 되어있는 데이터를 삭제하고 싶을때 사용한다.
위에서 예를 들은 찜하기에 있는 상품을 삭제하고 싶을때, 서버와 맞는 키값을 보내 삭제 할 수 있다.
useEffect(()=>{
fetch('서버의 주소',{
method : 'DELETE',
headers: { authorization : 토큰 // 토큰형식은 백엔드와 키값을 맞춰야합니다. },
// 찜하기 데이터를 삭제할때도 마찬가지로 토큰값이 있어야한다.
body : JSON.stringify({
id : 찜하기에 있는 삭제하고 싶은데이터의 아이디.
}) // id를 보낼건지 상품명을 보낼건지는 서버와 키값을 맞춰야함.
})
.then(res => res.json())
// 서버에서 전송받은데이터를 자바스크립트의 형식으로 변경해준다고 생각해주세용
.then(data => data.message === "SUCCESS"
? alert('삭제성공') : alert('삭제실패...'))
// DELETE를 사용할때는 굳이 데이터 저장을 할 필요는 없고 확인을 위해
// alert창이나 콘솔창으로 삭제가 잘 동작하는지 확인하면된다.
},[])PATCH
서버에 저장되어있는 데이터를 수정하고 싶을때 사용한다.
예를들어 장바구니에서 수량을 수정할때 키값을 보내 수정 할 수 있다.
- PUT 메서드와 다른점 간단하게 설명하면 PUT메서드는 데이터 전부를 수정할때 사용하고, PATCH메서드는 내가 원하는 부분만 삭제할때 사용한다.
useEffect(()=>{
fetch('서버의 주소',{
method : 'PATCH',
headers: { authorization : 토큰 // 토큰형식은 백엔드와 키값을 맞춰야합니다. },
// 장바구니 데이터를 수정할때도 마찬가지로 토큰값이 있어야한다.
body : JSON.stringify({
quantitiy : 장바구니에 있는 변경하고 싶은데이터의 수량값.
})
})
.then(res => res.json())
// 서버에서 전송받은데이터를 자바스크립트의 형식으로 변경해준다고 생각해주세용
.then(data => data.message === "SUCCESS"
? alert('변경성공') : alert('변경실패...'))
// PATCH를 사용할때는 굳이 데이터 저장을 할 필요는 없고 확인을 위해
// alert창이나 콘솔창으로 변경이 잘 동작하는지 확인하면된다.
},[])