[React + TypeScript] 포켓몬 타입 불러오기

PokeApi 데이터 요청하기

//cardList

//포켓몬 개별 데이터 요청 (타입 추출용)
const typesResult = await Promise.all(
  detailRes.data.types.map(async (typesItem: PokemonResponse) => {
    const typesRes = await instance.get(typesItem.type.url);
    return typesRes.data;
  })
);

//포켓몬 한국어 타입
const typesKoreanName =
  typesResult.map(
    (type) =>
      type.names?.find(
        (typeName: KoreanName) => typeName.language.name === "ko"
      )?.name 
   ) || [];
return {
  types: typesKoreanName,
};

1) detailRes.data.types 접근

detailRes는 포켓몬 url을 get 요청해서 포켓몬마다 각각의 데이터 확인이 가능하다. 내가 포켓몬 도감을 만들면서 필요한 데이터는 abilities, id, species, sprites, types 속성들이다. 그 중에서도 타입 추출하기 위해서 사용했던 types에서 설명해보려고 한다.
types 속성에는 2개가 들어있을 수도 있고 1개가 들어있을 수도 있다. 포켓몬마다 타입이 다르기 때문이다. 그렇기 때문에 map을 사용해서 포켓몬 타입을 순회하며 추출할 예정이다. 아래 이미지를 자세히 보면 types로만 접근해서 포켓몬 타입 을 추출하는 건 불가능하다.

2) types.type.url Get 요청하기

위에서 설명했다 싶이 types로만 접근이 불가능해서 url에 다시 get요청을 해야한다. 나는 get 요청한 것을 typesRes라는 변수에 담아주고, typeRes.data를 return해서 값을 typesResult에 넣어줬다. 그렇다면 typesResult를 콘솔에 출력해보면 무슨 결과가 나올까?

3) typeResult 접근

아래 이미지를 보면 한개의 타입만 캡쳐해왔고, names안에 배열안에 객체로 한국어 타입인 풀과 독을 확인할 수 있다. names에 접근해서 바로 추출할 수 있었으면 정말 좋았을텐데,, 한국어 타입을 추출할 수 있는 로직을 따로 만들어줘야 한다.

4) 포켓몬 타입 한국어 추출하기

const typesKoreanName =
  typesResult.map(
    (type) =>
      type.names?.find(
        (typeName: KoreanName) => typeName.language.name === "ko"
      )?.name 
   ) || [];
return {
  types: typesKoreanName,
};

• typesResult는 여러 포켓몬 타입 정보를 담고 있는 배열이다. map을 사용하여 배열의 각 요소인 type에 접근해서, 그 결과를 새로운 배열인 typesKoreanName로 만든다.

• type.names는 각 타입의 이름을 여러 언어로 제공하는 배열이다. 옵셔널 체이닝(?.)을 사용하여 names가 존재할 경우에만 값을 반환한다.

• find 메서드를 사용하여 언어 이름이 ko인 요소를 찾아서 반환한다.
  (typeName: KoreanName) => typeName.language.name === "ko":

• find 메서드가 반환하는 타입인 이름 객체의 name 속성을 가져오는데. 만약 find가 어떤 요소도 찾지 못한다면 undefined가 반환된다.

• map이 반환한 결과가 undefined 또는 비어 있는 배열일 경우, 빈 배열 []로 대체할 수 있도록 설정했다.

---

return에 반환하는 값들 중 아이디, 이름, 타입등 반환해주고 반환하는 모든 값을 result 변수에 담아 state에 담아 데이터 바인딩 한 뒤에, 원하는 스타일까지 지정해주면 된다.

💡포켓몬 타입 배경 색상 전역 설정하기

필수는 아니다. 나는 타입별로 특정색을 지정해주고 싶어서 따로 전역 설정을 해주었다.

//theme.ts
export const abilitiesColor: Theme = {
  강철: "#69A9C7",
  불꽃: "#e56c3e",
  물: "#5185C5",
  풀: "#66A945",
  전기: "#F6D851",
  //...생략
};

💡전역 스타일링 불러오는 방법

일반 className으로는 타입마다 내가 원하는 스타일을 줄 수 없기에 styled-componets를 사용하여 스타일을 넣어줬다

<div className="pokemon-ability-box">
  {pokemonTypes.map((typeitem) => {
    return (
      <PokemonAbilityItem key={typeitem} $typeitem={typeitem}>
        {typeitem}
      </PokemonAbilityItem>
    );
  })}
</div>;

const PokemonAbilityItem = styled.div<PokemonAbilityItemProps>`
  ${flexStyles()}
  width: 100%;
  background-color: ${(props) => abilitiesColor[props.$typeitem]};
  color: ${({ theme }) => theme.white};
  padding: 3px 0;
  border-radius: 5px;
  font-size: 0.8rem;
`;

• props로 $typeitem={typeitem}을 내려줬다. 사실상 코드는 이걸 의미한다. abilitiesColor["풀"] 그래서 기존에 색상을 지정해줬던 것이 동적으로 들어와서 스타일을 원하는대로 넣어줄 수 있다.