TIL_[React] fetch 함수

hyemi jo·2020년 11월 8일

fetch 함수를 이용해 로그인의 로직을 만들어 보려고 한다

fetch("api주소",{
	method : "POST",
	body:JSON.stringify({
			email: this.state.id,
			password: this.state.pw,
	}),
})

//비동기처리 가능한 것들만 then에 담을 수 있다. 
	.then((response)=> response.json())
//response의 네이밍은 상관없다. object형태로 변환하는 과정,body에 담긴 정보만 object로 변환하는 과정
	.then((result)=> console.log("결과:", result));
// 위의 then 에 대한 return값이 result에 담긴다.

** then : fetch가 끝나는 것을 기다렸다가 then이 실행된다.

프론트엔드 로직

button의에서 onClick 이벤트가 발생할때 백엔드에게

method : post

body 에 담아서 {id:this.state.id, pw:this.state.pw,}

json (stringify)의 형식으로 백엔드와 통신하는 것,

  • string의 형식으로 소통해야한다.
  • 오브젝트를 string 형식으로 변환해서 소통해야한다.
  • 백엔드에서 보내준 json string을 object로 변환하여 사용하는 과정이 필요하다.
  • 응답의 조건에 따른 처리 과정이 프론트에서 필요

작업 순서

  1. email - input
  2. setState
  3. password input
  4. setState
  5. button onclick
  6. fetch
  7. response - 응답과정에서 백엔드에서 토큰이 발생하는 것
profile
기억보단 기록을📓

0개의 댓글