14.1 HTTP 요청보내기: async, await 사용하기 (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

이 게시글을 혹시나 읽으신다면 선수지식으로 자바스크립트에서 비동기와 promise가 무엇인지 알고 있으셔야합니다.

async, await 사용하기

우선 async, await을 사용하기 전 코드와 사용한 후의 코드를 비교해보자

async,await을 사용하기 전 코드이며 promise 객체를 반환하는 요소들이 있기 때문에 then이 많이 사용되어 

코드가 길어지고, 코드의 가독성도 떨어진다고 볼 수 있다.

  function fetchMoviesHandler() {
    fetch("https://swapi.dev/api/films/")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        const transformedMovies = data.results.map((movieData) => {
          return {
            id: movieData.episode_id, // episode_id 를 id로 바꿈
            title: movieData.title, // title은 안바꿈
            openingText: movieData.opening_crawl, // opening_crawl 를 openingText 바꿈
            releaseDate: movieData.release_date, // release_date 를 releaseDate 바꿈
          };
        });
        setMovies(transformedMovies);
      });
  }

async, await을 사용한 후의 코드이며 코드 길이도 줄어들고, 가독성도 좋아진다.

  async function fetchMoviesHandler() {
    const res = await fetch("https://swapi.dev/api/films/");
    const data = await res.json();

    const transformedMovies = data.results.map((movieData) => {
      return {
        id: movieData.episode_id, // episode_id 를 id로 바꿈
        title: movieData.title, // title은 안바꿈
        openingText: movieData.opening_crawl, // opening_crawl 를 openingText 바꿈
        releaseDate: movieData.release_date, // release_date 를 releaseDate 바꿈
      };
    });
    setMovies(transformedMovies);
  }