React-Fetch

kyj2471·2020년 12월 26일
0

WECODE 15기

목록 보기
20/28

fetch

이번에 1차 프로젝트를 하면서 너무 중요하고 많이 쓰였지만 이해도가 조금 부족했던 것중 저는 fetch라는 메서드를 뽑았습니다.
그래서 velog 에서 개념정리 및 복습용으로 작성해 보려 합니다.

fetch의 용도

1차 프로젝트를 하면서 fetch라는 메서드는 처음에 뭔지 잘 몰랐다.
그런데 그냥 쉽게 생각하면 javascript를 사용하며 필요시 네트워크로 요청을 보내고 정보를 받아오는것이라 생각하면 편하다
promise기반이라 어떠한 상태냐에 따라 로직 추가 및 처리하는데 최적화되어있다.

use fetch

fetch는 위에서 말했듯 promise객체로 반환을 합니다.
이렇게 반환받은 response는 실제 json이 아니므로 이 response로 부터 원하는 값을 가져오기 위해 json()이라는 메서드를 이용해야합니다.

structure

우선 기본적 fetch를 사용하는 구조를 보자

fetch('url')
.then(response => response.json())
.then(json => console.log(json))

위의 구조는 fetch를 사용한 기본적인 뼈대이다.
fetch라는 메서드에 우선 데이터를 교환할 url주소를 작성합니다.
그리고 첫번째 then에서 응답한 데이터를 json객체로 변환해줍니다.
즉 위의 코드를 해석하자면 네트워크에서 json 파일을 가져와서 콘솔에 인쇄하는 것입니다.

fetch를 통한 login page

signIn = () => {
  fetch(LOGIN_API, {
    method:"POST",
    body:JSON.stringify({
      email:this.state.id,
      password: this.state.pw,
    }),
  })
  .then(response => response.json())
  .then(result => {
    if(result.message === "SUCCESS"){
      alert("Login SUCCESS");
      localStorage.setItem("token",res.TOKEN);
    }else alert("FAIL)
                });
  };

위와 같은 코드에서 config에 미리 저장해놓은 "LOGIN_API"라는 곳에서
state값인 id와 pw,token을 사용하여 백엔드와 통신하여 로그인을 하게되고 localStorage에 토큰을 저장합니다
프로젝트를 진행하면서 로그인페이지에서 fetch를 사용함으로 가장 기본적이지만
fetch의 전체적 흐름을 알게되었습니다.

profile
[ frontend-developer ]

0개의 댓글