[ React : fetch 함수를 이용한 회원가입 & 로그인 구현 (1) ]

규칙

• button에서 onClick을 눌렀을 때 fetch 함수를 사용한다
• E-mail method : POST { } 사용
• JSON은 백엔드와 프론트엔드가 통신할 때 사용
• 소통을 할 때 객체 형태로 소통을 하는게 아니라 스트링 형태로 먼저 소통을 해야 한다. ( Obj 값을 스트링으로 변환한 뒤에 스트링 형태로 소통하기로 약속되어있다.)
  Obj를 스트링으로 변환하여 소통을 하고 작업을 할 때에는 스트링을 다시 Obj로 변환하여 작업한다.
• 기본적인 로직은 경우의 수를 따져서 프론트엔드에서 처리를 해줘야 한다.
• 백엔드는 응답만. 기본적인 로직은 프론트엔드에서 처리.

작업 순서

1. Email input : onChange
2. setState
3. Password input : onChange
4. setState
5. Button : onClick
6. fetch
7. Response 응답

로그인이 성공하면 백엔드에서 토큰을 준다. 로컬 스토리지에 토큰을 저장하고, 메인 페이지로 넘어가도 그 토큰은 저장되어 있기 때문에 계속 로그인이 된 상태가 된다. 매번 응답을 요청할 때마다 로컬 스토리지에 저장된 토큰을 같이 줘야한다.

fetch("api 주소", {
  method: "POST", 
  body: JSON.stringify({ /* JSON을 string으로 변환해줌 */
    email: this.state.id,
    /*key 이름은 백엔드,프론트엔드와 동일하게 해야한다. */
    password: this.state.pw,
    /*key 이름은 백엔드,프론트엔드와 동일하게 해야한다. */
  }),
}) /* 요청 끝 */

  .then((response) => response.json())
    /* reponse : fetch의 return 값을 의미(string) -> obj로 변환하는 과정 */
  .then((result) => console.log("결과: ", result));
    /* result : response.json()의 return 을 의미 Obj*/

다른 코드보다 오래걸린다. 그러나, 기다리지 않고 실행하여 에러가 날수도 있으므로, fetch가 끝날 때까지 기다리는 .then 을 꼭 써야한다. 비동기처리가 된 것은 얼마든지 여러번 .then을 사용할 수 있다.