Data Fetching 실습 (fetch, promise, async, awaite)

Fetch는 브라우저에 내장된 비동기방식으로 데이터를 불러오는 기능이다. promise는 비동기 작업이 완료 또는 실패 했을 때 후속 처리가 가능하다. 미래에 어떤 시점에서 결과를 제공하겠다는 약속을 반환 한다.

const promise = Promise.resolve(10)
.then((x)=>{
    return 20;
})
.then((y) => {
  console.log(y);
  });

async, await는 데이터 전송의 성공 실패를 기다린다. 이 두개 키워드는 문법 상 꼭 같이 써야 한다. 성공 할 경우 await는 Promise나 fetch를 통해 전달 받은 데이터를 반환하고 실패 할 경우 자동으로 catch (error) {} 의 방식으로 애러가 던져(throw)진다.

아래는 수업 시간에 배운 예제 실습 코드이다.

import { useState } from "react";

// const delay = () => new Promise((resolve) => setTimeout(resolve, 2000));

export const Poketmon = () => {
  const [poketmons, setPoketmons] = useState([]);
  const [status, setStatus] = useState("idle");
  const handleClick = async () => {
    setStatus("loading");
    try {
      // await delay();
      const response = await fetch(
        "https://www.omdbapi.com/?apikey=7035c60c&s=frozen"
      );
      const data = await response.json();
      setPoketmons(data.Search);
      setStatus("succeeded");
    } catch (error) {
      setStatus("failed");
    }
  };

  return (
    <div>
      <button onClick={handleClick}>
        {status === "loading" ? "요청중" : "요청하기"}
      </button>
      <ul>
        {poketmons.map((poketmon) => (
          <li key={poketmon.imdbID}>
            {poketmon.Title} / {poketmon.Year}
          </li>
        ))}
      </ul>
    </div>
  );
};