React를 활용해 포켓몬스터 API로 포켓몬 도감만들기

웹개발자로 전향하고나서

api다루는게 아직도 익숙치가 않다

 

뭔가 좀더 연습이 필요할거같은데 집에서 해보자니 회사보안상 회사 일을 집으로 가져올 수 없기에 간단한 미니프로젝트를 시작해 보려한다

회사에선 맥으로 집에선 윈도우로 하려니 한영키가 햇갈리고 휠을 자꾸 반대로 돌리게 돼서 짜증나지만 할건해야하니까 그냥 하자

 

시작하기 앞서 무언가를 시작할때 지금 대세이거나 활용도가 높은것 보다는 내가 좋아하는것 혹은 관심있는걸로 시작한다

그게 더 재미있으니까

그때부터 였던거 같다 8살 그러니까 초등1학년때 포켓몬스터 1화를 보고 빠져든 포켓몬 세계는 아직도 내안에 깊숙히 자리잡았고 chatGPT의 추천을 받아 함께 포켓몬 도감을 제작해 보려 한다

 

시작은 역시 크리트 리액트 앱

 

npx create-react-app pokemon-pokedex

리액트 프로젝트가 만들어 졌을 터이다

다음 cd poke까지만 치고 탭을 누르면 자동완성 포켓몬 폴더로 이동하자

그다음 API를 활용해야 하니까

npm install axios

npm i axios 까지만 쳐도 된다 i가 인스톨의 약자로 들어가는듯.

 

src폴더안에 components폴더를 새로 만들자

그 후 components폴더안에 Pokedex.js 파일을 생성 이안에 포켓몬 1세대 정보들이 들어갈 것이다

 

Pokedex.js 의 기본 틀을 작성하자 react를 사용하고 useState, useEffect사용 그리고 axios사용

pokemonData변수를 저장할 useState와 나머지 기본 react세팅이다

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Pokedex = () => {
    const [pokemonData, setPokemonData] = useState([]);
  
    // 데이터 및 기타 코드를 가져와 여기에 배치합니다
  
    return (
      <div>
        {/* 여기에 포켓몬 데이터 표시 */}
      </div>
    );
  };
  
  export default Pokedex;

주석으로 달아놓은 데이터 및 기타코드 ... 이부분에

useEffect(() => {
  const fetchData = async () => {
    const allPokemonData = [];
    for (let i = 1; i <= 151; i++) {
      const response = await axios.get(`https://pokeapi.co/api/v2/pokemon/${i}`);
      const speciesResponse = await axios.get(`https://pokeapi.co/api/v2/pokemon-species/${i}`);
      const koreanName = speciesResponse.data.names.find(name => name.language.name === 'ko');
      allPokemonData.push({ ...response.data, korean_name: koreanName.name });
    }
    setPokemonData(allPokemonData);
  };

  fetchData();
}, []);

useEffect를 활용해 api 정보를 가져오자 글을 읽고있는 당신이 초보자라면 갑자기 당혹스러울 수 있다

진정하고 천천히 살펴보자

추상적으로 설명하면 const fetchData 라는 큰 틀로 api를 가져오게 된다

그밑에 const allPokemonData 가 있는데 말그대로 모든 포켓몬 데이터 정보인듯 싶다

지금 내가 마지막으로 기억하는것만 포켓몬이 700종류를 훌쩍 넘기에 1세대ㅔ 필요한 151마리만 필요하다

그러니 for문을 통해 1부터 151까지의 포켓몬 정보만 가져오는 것이다 (let i = 1; i < 151; i++)은 1부터 151 까지 차례대로 하나씩 더한다는 뜻 그럼 151 마리의 포켓몬 저보를 가져오게 되는데 이걸 어디서 받아오냐

 

바로 포켓몬 api되시겟따 const  response 응답이다 바로 옆의 https://pokeapi.co/api/v2/pokemon/${i}에서 가져오는데 여기서 i가 중요하다 위에 for문에서 돌린것을 기억하는가?

바로 이줄을 151번 돌려 이상해씨부터 뮤까지 가져오는것....!

참고로 이상해씨가 도감 1 번 뮤가 151번이다

 

햇갈려선 안된다 뮤츠가 150번 뮤가 151번이다

 

그다음줄인 speciesResponse 이것도 151 번을 돌리는데... 사실 뭔지 모르겟다

링크를 들어가보자 그러면 응답받는 json데이터를 볼 수 있는데

 

들어가면 포켓몬에대한 버전별 포켓몬에 대한 설명이 들어가 있다

그래서 다시 위로 올라가 api/v2/pokemon/$[i} 도 들어가보면

이름과 도감번호 정도만 들어있고 포켓몬에 대한 설명은 없는 걸로 보아 둘다 필요한 데이터인듯 싶다

 

다음 줄로 넘어가자

한국어로 만들고자 하니 한국어 설명을 speciesResponse에서 찾는다 

그리고 다음줄 찾은 데이터들을 밀어 넣어 준다

그리고 마지막 줄에 그 데이터들을 모두 모아 

setPokemonData(allPokemonData);

이렇게 하면 setPokemonData안에 allPokemonData가 들어가게 되며

들어간 setPokemonData는 위의

const [pokemonData, setPokemonDdata] = useState([]); 의 setPokemonDdata에 들어가고

들어간 setPokemonDdata는 비어있던 pokemonData로 들어가게 된다.............

왜 이렇게 까지 하는지는 아직 내 실력부족으로 설명하기 어렵다(pokemon, setPokemon같은 useState의 경우 보통 이런식으로 알아보기 쉽게 작명하며 set*** 의 데이터 변경으로 *** 을 변경시켜주는데... 그만설명하자 번거롭다)

이렇게 쓰자고 react만든분께서 하셧으니 따르자

 

이제 데이터를 가져왔으니

const renderPokemonList = () => {
  return pokemonData.map((pokemon) => (
    <div key={pokemon.id}>
      <img src={pokemon.sprites.front_default} alt={pokemon.korean_name} />
      <p>{pokemon.korean_name}</p>
      <p>ID: {pokemon.id}</p>
      <p>English Name: {pokemon.name}</p>
    </div>
  ));
};

이를 표시하는 함수를 만들었다.

방금 열심히 설명한 useState의 pokemonData를 활용 map함수로 포켓몬 이름 아이디 영문명 사진등을 찾아서 뿌려준다

예를들어 pokemon.id 는 도감 번호일 것이다.

pokemon.spites.front_default는 앞모습 사진인거 같다(포켓몬은 한버전당 한마리에 네가지 사진이 있다 기본 앞모습 뒷모습 색깔이다른앞모습 색깔이다른뒷모습)

 

이제 마지막 return에 renderPokemonList를 넣어 주면 끝

다음은 코드 전문이다

근데 영문명은 그냥빼고싶다 한글로 만들었는데 굳이..? 빼자!

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Pokedex = () => {
  const [pokemonData, setPokemonData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const allPokemonData = [];
      for (let i = 1; i <= 151; i++) {
        const response = await axios.get(`https://pokeapi.co/api/v2/pokemon/${i}`);
        const speciesResponse = await axios.get(`https://pokeapi.co/api/v2/pokemon-species/${i}`);
        const koreanName = speciesResponse.data.names.find(name => name.language.name === 'ko');
        allPokemonData.push({ ...response.data, korean_name: koreanName.name });
      }
      setPokemonData(allPokemonData);
    };

    fetchData();
  }, []);

  const renderPokemonList = () => {
    return pokemonData.map((pokemon) => (
      <div key={pokemon.id}>
        <img src={pokemon.sprites.front_default} alt={pokemon.korean_name} />
        <p>{pokemon.korean_name}</p>
        <p>ID: {pokemon.id}</p>
      </div>
    ));
  };

  return (
    <div>
      {renderPokemonList()}
    </div>
  );
};

export default Pokedex;

마지막으로 딱 한개 남았는데

 

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

이렇게 되어 있는 App.js로 들어가 쓸모없는 것을 모조리 지운다

 

import React from 'react';
import './App.css';
import Pokedex from './components/Pokedex';

function App() {
  return (
    <div className="App">
      <Pokedex />
    </div>
  );
}

export default App;

그리고 자잔 필요한 pokedex를 import해서 넣어주고 npm start를 하면...?

 

오우 씟 영문명이 들어간 모습과 빼버린 모습

포켓몬 도감 완성

 

다음에 정렬과 red버전 기준 설명을 넣어보자 언젠가...