[React] HTTP: 비동기 / 대기 사용시 async await 구문 사용하기

버튼 클릭 -> fetch() 사용하여 백엔드로 HTTP GET 요청 전달 -> fetch() 는 Promise 객체를 반환하므로 비동기이다! 따라서 then()구문 호출하여 미래 시점에 응답 받을 수 있도록 한다.

Promise를 다루는 두 가지 방법

1. then() 체인 사용하기

이렇게 Promise를 다룰 때 이렇게 then 체인, then 뒤에 then 재호출 할 수있다.

const [movies, setMovies] = useState([]);

const fetchMoviesHandler = () => {
  fetch("https://swapi.dev/api/films/")
    .then((response) => {
    return response.json();
  })
    .then((data) => {
    //json 키 이름 변경해서 가져오기
    const transformedMovies = data.results.map((movieData) => {
      return {
        id: movieData.episode_id,
        title: movieData.title,
        openingText: movieData.opening_crawl,
        releaseDate: movieData.release_date,
      };
    });
    //파싱 후 추출된 영화 data 트랜스폼한 후 movies 상태에 업데이트하기
    setMovies(transformedMovies);
  });
};

2. async await 문법 사용하기

함수 앞에 async 예약어를 추가하고, 프로미스를 반환하는 작업 앞에 await 예약어를 사용하면 된다.
이는 단순한 코드 변환이기 때문에 백그라운드에서는 then블록을 사용한 것과 같은 일을 하지만, then 체인 보다 훨씬 코드가 단순해져서 좀 더 읽기 편해진다.

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

  //✅ 함수 앞에 async 예약어 추가
  const fetchMoviesHandler = async () => {
    //🔥 프로미스 반환하는 작업 앞에 await 예약어 사용
    const response = await fetch("https://swapi.dev/api/films/");
    
    //🔥 프로미스 반환하는 작업 앞에 await 예약어 사용
    const data = await response.json();
    
    //json 키 이름 변경해서 가져오기
    const transformedMovies = data.results.map((movieData) => {
      return {
        id: movieData.episode_id,
        title: movieData.title,
        openingText: movieData.opening_crawl,
        releaseDate: movieData.release_date,
      };
    });
    
    //파싱 후 추출된 영화 data 트랜스폼한 후 movies 상태에 업데이트하기
    setMovies(transformedMovies);
  };
  
  //...

겉보기에는 단계적으로 실행되는 동기화 작업처럼 보이지만, 백그라운드에서는 위의 then 호출 처럼 코드가 변환되고 있다.

프로미스를 다룰 때 async, await구문으로 코드를 좀 더 읽기 편하게 사용할 수 있다.
이는 자바스크립트 기본 기능이므로 리액트에서도 사용할 수 있다.