[포켓몬 도감 프로젝트] #6 – 🧬 PokéAPI에서 진화 정보 가져오기

 

📝 [포켓몬 도감 프로젝트] #6 – 🧬 PokéAPI에서 진화 정보 가져오기

 

 

🎯 목표

상세 페이지에서 해당 포켓몬의 진화 트리를 보여준다!
예: 피카츄 → 라이츄, 파이리 → 리자드 → 리자몽

 

 

---

 

✅ API 흐름 정리

PokéAPI에서 진화 정보를 불러오기 위해 3단계로 구성된 API 요청을 거쳐야한다.

1. `pokemon-species` → `evolution_chain` URL 확인
2. `evolution-chain` → 진화 트리 데이터 가져오기
3. 재귀 구조를 파싱하여 진화 리스트 완성

필요 api 리스트
species.url(종 정보)	https://pokeapi.co/api/v2/pokemon/{name}
evolution_chain.url	https://pokeapi.co/api/v2/pokemon-species/{name}
진화 트리	https://pokeapi.co/api/v2/evolution-chain/{id}

 

 

📡  진화리스트 fetch 함수 

https://pokeapi.co/api/v2/evolution-chain/1/

evolution_chain의 api는 위와 같이 복잡한 중첩 구조로 되어있다.
최종적으로 데이터는 ['bulbasaur', 'ivysaur', 'venusaur'] 와 같은 진화 네임 배열이 필요!!

 

// 타입에 해당하는 포켓몬 리스트 가져오기
export const fetchPokeEvoChain = async (name: string) => {
  {/* ... */}
  let evoChain: string[] = [];

  const evoNames = (obj: any) => {
    if (!obj) return evoChain;
    evoChain.push(obj.species.name);

    if (obj.evolves_to && obj.evolves_to.length > 0) {
      return evoNames(obj.evolves_to[0]);
    }
    return evoChain;
  };
  evoNames(evoRes.chain);

  return evoChain;
};

- chain.species.name
- chain.evolves_to[0].species.name
- chain.evolves_to[0].evolves_to[0].species.name

👉 evolution_chain의 api에서 위와 같은 3개의 결과값을 구하는데 evolves_to가 계속 중첩되므로 일반적인 반복문은 복잡해진다고 생각, 여러 반복문을 찾아보다가 재귀함수를 사용해 간단하게 쓰는 방법을 채택하게 되었다.

 

 

📌  상세 페이지 렌더링

Error: Route "/pokemon/[name]" used `params.name`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at PokemonDetail (src/app/pokemon/[name]/page.tsx:10:52)

// /[name]/page.tsx

  const { name } = await params;
  const data = await fetchPokemonDetail(name);
  const evolutions = await fetchPokeEvoChain(name);

👉 page.tsx에서 서버렌더링으로 params를 불러올때 비동기로 호출이 되기 때문에 async await 을 사용해서 동기적으로 써야한다.

 

 

🎉 결과

상세페이지

 

 

🧠 오늘의 회고

이번 편에서는 복잡한 중첩 구조의 api를 불러오면서 여러 함수를 비교해서 사용하면서 반복문에 대한 여러가지 방법을 알게 되었고, 복잡한 중첩 구조를 어떻게 풀어나가야 할지 좀 더 공부해야 되겠다고 느꼈다.

---

 

📎 다음 목표 

• 검색 기능 
• 진화 경로 강조
• 애니메이션 효과 등등