외부 API에서 데이터 로드 리믹스

지금까지 static loading data , loading data from our database 을 살펴보았지만 널리 사용되는 또 다른 방법은 외부 API에서 로드하는 것입니다.

이 경우 Pokémon API를 쿼리하여 모든 Pokémon 목록을 검색합니다. 우리는 그것을 잡고 하나를 클릭하여 관련 사진을 볼 것입니다.

지금까지 설정한 프로젝트를 사용하겠습니다.
나와 함께 코딩하고 싶다면 이 GitHub repo부터 시작하세요.

Pokémon API 호출 생성

가장 먼저 할 일은 새 서버 파일을 추가하는 것입니다. 우리의 경우 이 파일은 매우 간단하지만 나중에 이러한 호출 중 일부를 재사용할 수 있습니다.
pokemon.server.ts 디렉토리 안에 app/models 파일을 생성합니다.

여기에는 두 개의 파일이 필요합니다. 하나는 모든 포켓몬의 기본 목록을 검색하고 다른 하나는 이름을 기반으로 특정 포켓몬에 대한 세부 정보를 검색합니다.

첫 번째가 가장 쉽습니다.

export async function getPokemons() {
  const res = await fetch(
    'https://pokeapi.co/api/v2/pokemon?limit=100000&offset=0'
  ).then((res) => res.json());

  return res.results;
}

기술적으로 await fetch 후크를 반환할 수도 있지만 결과에만 관심이 있으므로 직접 반환합니다.

Note: The Pokemon API returns a pagination result. That is why we need to access res.results here.

두 번째 부분은 이름으로 포켓몬을 검색하는 것입니다.

export async function getPokemon(name: string | undefined) {
  const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`).then(
    (res) => res.json()
  );

  return {
    name: name,
    img: res.sprites.front_default,
  };
}

여기서 우리는 필요한 것만 반환하는 동일한 트릭을 적용합니다. 응답 개체에서 원하는 만큼 많은 필드를 추가할 수 있습니다.

포켓몬 개요 목록 만들기

이제 데이터에 액세스할 수 있으므로 데이터를 사용할 수 있습니다.Pokemon 디렉토리 안에 app/routes 폴더를 만듭니다.

그리고 이 안에 개요 파일이 될 index.tsx 파일을 만듭니다.

그런 다음 TypeScript를 활용하여 유형 저장 방식으로 로더를 추가할 수 있습니다.

import { json } from "@remix-run/node";
import { Link, useLoaderData } from "@remix-run/react";
import { getPokemons } from "~/models/pokemon.server";

type LoaderData = {
  data: Awaited<ReturnType<typeof getPokemons>>;
};

export const loader = async () => {
  return json<LoaderData>({
    data: await getPokemons(),
  });
};

export default function Posts() {
  const { data } = useLoaderData() as LoaderData;
  return (
    <main className="mx-auto max-w-4xl">
      <h1 className="my-6 border-b-2 text-center text-3xl">
        Which Pokémon do you want to catch?</h1>
      <ul className='mx-auto text-center'>
        {data.map((pokemon) => (
          <li key={pokemon.name}>
            <Link
              to={pokemon.name}
              className="text-blue-600 underline"
            >
              {pokemon.name}
            </Link>
          </li>
        ))}
      </ul>
    </main>
  );
}

주의해야 할 주요 부분은 실제loader 함수와 구성 요소 내부의 이 로더 함수에 대한 호출입니다.

그러면 새로 생성된 서버 파일을 쿼리하고 모든 포켓몬을 요청합니다.

그런 다음 목록으로 렌더링하여 다음과 같은 결과를 얻습니다.



또한 링크 구성 요소를 사용하여 이름을 기반으로 각 포켓몬에 연결합니다.
다음 부분에서 이 정보를 사용할 것입니다.

단일 포켓몬 페이지 렌더링

위에서 읽은 것처럼 각 포켓몬에 연결하면 /pokemon/${name}와 같은 URL이 생성됩니다.
이를 활용하여 $name.tsx 디렉토리에 pokemon 파일을 추가할 수 있습니다.
$name는 나중에 읽으려는 매개변수입니다.

이 파일의 설정은 개요 페이지와 매우 유사하지만 다른 기능을 사용합니다.

import { json, LoaderFunction } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { getPokemon } from "~/models/pokemon.server";

type LoaderData = {
  pokemon: Awaited<ReturnType<typeof getPokemon>>;
};

export const loader: LoaderFunction = async ({params,}) => {
  return json({
    pokemon: await getPokemon(params.name),
  });
};

export default function PostSlug() {
  const { pokemon } = useLoaderData() as LoaderData;
  return (
    <main className="mx-auto max-w-4xl">
      <h1 className="my-6 border-b-2 text-center text-3xl">
        You caught: {pokemon.name}
      </h1>
      <img className='mx-auto' src={pokemon.img} />
    </main>
  );
}

이제 Pokémon을 클릭하면 다음 페이지가 표시됩니다.



이는 외부 API에서 데이터를 로드하는 보다 자세한 방법입니다. 항상 파일 로더 기능에서 직접 엔드포인트를 사용하도록 선택할 수 있습니다.
그러나 그것들을 추출함으로써 당신은 미래를 준비하게 됩니다.

GitHub에서 전체 코드를 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나