[React] fetch를 통해 HTTP 요청 보내기

안녕하세요, 피터팬입니다!

오늘은 fetch에 대해 배워볼건데요.

fetch는 서버에 HTTP요청을 보내 데이터를 받을 수도, 보낼 수도 있습니다.

 

JS는 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있습니다. 이는 HTTP 요청에 최적화 되어있고 상태도 잘 추상화 되어있고, Promise를 기반으로 되어있기 때문에 상태에 따른 로직을 추가하고 처리하는데 최적화 되어 있기 때문입니다.

fetch의 기본 문법은 다음과 같습니다.

let promise = fetch(url,[options])
    .then(response => response.json()) // 정보 받는 방식 (아래는 JSON)
    .then(response => data.filter(item=>item.isRequired));//본인 입맛에 맞게 가공

url ; 접근하고자 하는 URL / options ; 선택 매개변수(method, header,body 등)

• method ; GET(가져옴,default값)/POST(보내기)/DELETE(삭제)
• headers ; Request Header 지정
• body ; 전달하고자 하는 응답 내용

API를 호출할 때, fetch함수는 대표적인 비동기함수 입니다. 그렇기 때문에 API호출하는 과정이 끝나지 않더라도 자동적으로 다음 코드로 넘어갑니다. 하지만 API로부터 받아온 정보를 사용할 필요가 있는 경우에 .then함수/async,await를 쓰는 것입니다.

# 비동기 함수 ; 호출부에서 실행 결과를 기다리지 않아도 되는 함수

 

예시(SWAPI에서 영화 정보 가져오기) - then 이용

import React, { useState } from "react";

import MoviesList from "./components/MoviesList";
import "./App.css";

function App() {
  const [movies, setMovies] = useState([]);

  const fetchMoviesHandler = () => {
    fetch("https://swapi.dev/api/films/")
      // 받는 방식 (JSON)
      .then((response) => {
        return response.json();
      })
      // 가져올 데이터
      .then((data) => {
        const transformedMovies = data.results.map((movieData) => {
          return {
            id: movieData.episode_id,
            title: movieData.title,
            releaseDate: movieData.release_date,
            openingText: movieData.opening_crawl,
          };
        });
        setMovies(transformedMovies);
      });
  };
  console.log(movies);
  return (
    <React.Fragment>
      <section>
        <button onClick={fetchMoviesHandler}>Fetch Movies</button>
      </section>
      <section>
        <MoviesList movies={movies} />
      </section>
    </React.Fragment>
  );
}

export default App;

- fetch를 통해 가져오고 → then실행문을 순서대로 비동기처리함

 

예시(SWAPI에서 영화 정보 가져오기) - await 이용(더 간결)

function App() {
  const [movies, setMovies] = useState([]);

  async function fetchMoviesHandler(){
    const response = await fetch("https://swapi.dev/api/films/")
    const data = await response.json();
    const transformedMovies = data.results.map((movieData) => {
          return {
            id: movieData.episode_id,
            title: movieData.title,
            releaseDate: movieData.release_date,
            openingText: movieData.opening_crawl,
          };
        });
      });
    setMovies(transformedMovies);
  };
  console.log(movies);
  return (
    <React.Fragment>
      <section>
        <button onClick={fetchMoviesHandler}>Fetch Movies</button>
      </section>
      <section>
        <MoviesList movies={movies} />
      </section>
    </React.Fragment>
  );
}

export default App;

- 동시에 처리(동기 처리)하지 않고, await문이 끝날 때까지 기다려줌 (비동기 처리)