# 6-2-1. Poketmon API ## src/hooks/usePokemon.ts `/src` 디렉토리 하위에 `/hooks` 를 생성하고, 그 하위에 포켓몬 목록을 가져오는 커스텀 훅\(`/usePoketmon.ts`\)을 추가합니다. ```typescript import axios, { AxiosResponse } from 'axios'; import { useQuery } from 'react-query'; import { UseQueryResult } from 'react-query/types/react/types'; import { PokemonResponse } from '../types'; const pokemonApi = (id?: string) => axios.get(`https://pokeapi.co/api/v2/pokemon/${id || ''}`, { params: { limit: 151 }}); const usePokemon = (id?: string): UseQueryResult, Error> => useQuery(id ? ['pokemon', id] : 'pokemon', () => pokemonApi(id)); export default usePokemon; ``` 파라미터로 `id` 를 전달받게 되면 해당 포켓몬의 상세 정보를 가져오고, `id` 를 전달하지 않으면 포켓몬 목록을 가져옵니다. 아래와 같이 사용할 수 있습니다. ```typescript const { isLoading, isError, data } = usePokemon(); // List const { isLoading, isError, data } = usePokemon(id); // Detail ``` 이전 시간에 만든 `PoketmonList` 컴포넌트에 `usePoketmon` 을 연동해보겠습니다. `usePoketmon` hook 을 상단에 선언하고 쿼리의 결과물을 `ListItem` 으로 이터레이션 해주면 됩니다. 쿼리가 로딩 상태일 경우엔 아래의 gif 이미지로 대체합니다.  ```jsx import React from 'react'; import styled from '@emotion/styled/macro'; import { ListResponse } from '../types'; import usePokemonQuery from '../hooks/usePokemonQuery'; const Base = styled.div` margin-top: 24px; `; const LoadingWrapper = styled.div` display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100vh - 180px); `; const Loading = styled.img``; const ListItem = styled.li` position: relative; list-style: none; display: flex; align-items: center; box-shadow: 6px 4px 14px 5px rgba(0,0,0,0.21); border-radius: 12px; & + & { margin-top: 18px; } `; const List = styled.ul` margin: 0; padding: 0; `; const Image = styled.img``; const Name = styled.p` margin: 0; padding: 0 0 0 12px; flex: 1 1 100%; color: #374151; text-transform: capitalize; font-size: 16px; font-weight: bold; `; const Index = styled.p` position: absolute; margin: 0; padding: 0; right: 16px; bottom: 16px; font-size: 24px; font-weight: bold; color: #D1D5DB; `; const getImageUrl = (pokemonIndex: number): string => `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemonIndex}.png` const formatNumbering = (pokemonIndex: number | string): string => `#${(typeof pokemonIndex === 'number' ? String(pokemonIndex) : pokemonIndex).padStart(3, '0')}` const PokemonList: React.FC = () => { const { isLoading, isError, data } = usePokemonQuery(); const { push } = useHistory(); return ( { isLoading || isError ? ( ) : ( { data?.data.results.map((pokemon, idx) => ( {pokemon.name} {formatNumbering(idx + 1)} )) } ) } ) } export default PokemonList; ``` 
