fetch_React

miin·2021년 9월 27일

React

목록 보기

12/55

정의

백앤드로부터 데이터를 받아오려면 API를 호출하고 데이터를 응답받는다. 이때 자바스크립트 web API fetch()함수를 쓰거나 axios 라이브러리를 사용할 수 있다

js에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 메서드

비동기 요청중 url로 요청하는 경우가 가장 흔한데 이를 가능하게 해주는 API가 fetch API이다

ES6부터 들어온 js내장 라이브러리

장점

자바스크립트의 내장 라이브러리 이므로 별도로 import할 필요가 없다

프로미스 기반으로 만들어져서 다루기가 쉽다

내장 라이브러이이기 때문에 업데이트에 따른 에러방지가 가능

단점

지원하지 않는 브라우저가 존재한다(IE11...)

네트워크 에러 발생시 response timeout이 없어 기다려야한다

JSON으로 변환해주는 과정이 필요함

상대적으로 axios에 비해 기능이 부족하다

간단한 통신의 경우에는 fetch를 사용하고 기능이 좀 더 필요하면 axios를 사용하는게 좋다

문법

첫번째 인자로 http 요청을 보낼 API주소, 두번째 인자로 요청을 보낼때의 옵션들을 객체형대로 받는다

AJAX

js를 사용한 비동기통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술

요청 정보 파라미터

method: HTTP method와 동일하며 요청방식을 나타냄(GET, POST, PUT, DELETE등)

headers: 요청 헤더에 대한 정보를 나타냄

body: 요청을 보내는 데이터를 나타냄, 여러가지 자료형을 대입할 수 있다

fetch code

fetch("api주소", {
      method: "POST",
      body: JSON.stringify({
        email: this.state.id,
        password: this.state.pw,
      }),
    })
      .then((response) => response.json())
      .then((result) => console.log("결과: ", result));

백&프 로그인& 회원가입 전체적인 흐름

회원가입/ 로그인( 서버주소만 바꾸면 됨)

input-onchange/ button-onClick 함수안에 fetch함수를 선언
(button submit default값 없애기)

    super();
    this.state = {
        idValue: '', 
        pwValue: '' ,
        buttonOn: false,
    };
}
goToMain = () => {
    fetch("http://10.58.3.77:8000/user_login/", {
    //백엔드 로그인 || 회원가입 서버주소
        method: "POST",
        body: JSON.stringify({
            email: this.state.idValue,
            password: this.state.pwValue           
        //         name: "dfsfdsdf",
        // phone_number: "01041560647",
        // information: "EKFKEKEKEK",
        }),
    })
    .then((response) => response.json())
    //첫번째 then: server에서 보내준 response를 object형태로 변환
    .then((response) => {
        console.log("결과: ", response);
        //두번째 then: object로 변환한 response를 console.log로 확인
        if(response.token){
            localStorage.setItem('token', response.token);
            //로컬스테이지에 토큰이 찍힘
            // this.props.history.push('./main')
        }
    })
}

* state에 있는 id,pw value값이랑 email, password value값 같아야함
* fetch 함수의 첫번째 인자는 API주소, 두번째 인자는 HTTP 통신에 관한 내용(GET, POST, PATCH)
* body에는 JSON 형태로 주고 받을 데이터입력
(통신을 할 때는 String형태의 JSON으로 보내야 하기 때문에 JSON.stringify()라는 메서드를 활용해서 포맷을 기존의 js object에서 JSON String으로 변환해줌
* HTTP통신은 다른 로직에 비해 오래걸리기 때문에 비동기로 처리
* 동기: 한줄씩 차례대로 실행
비동기: 기다려지지 않고 넘어감

fetch함수는 Promise 객체를 리턴한다
then() 메서드는 promise 객체에 사용할 수 있는 메서드

프론트/ 백엔드 통신이 안될때 확인사항

연결 자체가 안될 때

동일한 WIFI 를 사용하고 있는지 확인.

fetch 함수가 실행이 되는지 확인.

API 주소에 http://10.58.8.116:8000/users/signup 과 같이 http:// , IP주소 , 포트번호 , 엔드포인트 다 작성이 잘 되었는지 확인.

백엔드 IP 주소 재확인.

백엔드 서버가 열려 있는지 확인.

연결은 되었지만, 원하는 응답이 오지 않고 에러가 날 때.

fetch 함수의 syntax 확인.

body 에 담아서 전달해 주어야 하는 정보중 누락된 것이 있는지 확인.

body 에 key 값이 올바르게 들어갔는지 확인.

개발자 도구의 네트워크 탭-> name -> header-> preview

network tap에서 토큰확인

예제

import React, {Component} from 'react';
import Child from './Child';
import './index.scss';
class index extends Component {
  constructor () {
    super ();
    this.state = {
      text: 'HI',
      users: [],
    };
  }
  componentDidMount () {
    // 데이터 로딩 data loading...
    // 1. 백엔드 서버를 호출해서 원하는 데이터를 받는다.
    // 2. 받은 데이터를 이 컴포넌트의 저장소에 저장한다 (setState).
    // 3. 사용한다.
    fetch ('https://jsonplaceholder.typicode.com/users') //1. => 요청
      .then (response => response.json ()) // => JSON body 를 JS로 변환
      .then (response => this.setState ({users: response})); //2.
  }
  clickHandler = () => {
    this.setState ({text: 'HELLO'});
  };
  render () {
    return (
      <div className="state">
        <div onClick={this.clickHandler} className="state-contents">
          {this.state.users.map ((user, idx) => {
            return <Child key={idx} name={user.name} />;
          })}
        </div>
      </div>
    );
  }
}
export default index;```

hook 사용하기

const [monsters, setMonsters] = useState([]);

useEffect(() => {
	fetch("http://slksdjfsdf")
    .then((res) => res.json())
    .then((res) => setMonsters(res));
}, []);