[React] 📤 PokeAPI 데이터 GET요청 연습

처음에 했던 데이터 요청 연습은 for문으로 반복해서 불러왔다. api 문서를 읽어봤을 때 URL파라미터로 포켓몬 id에 접근을 어떻게 해야할 지 모르겠어서 블로그를 참고하여 데이터를 요청했지만 이것마저도.. 많이 어려웠다.

for문으로 데이터를 요청하는 방법은 초기 로딩 속도가 느리기 때문에 오늘 map 메서드를 사용해서 새롭게 GET 요청하는 방법을 배웠다. 헷갈리는 부분이 있어서 이해하고 다시 만들어보려고 한다. 일단 오늘은 한줄 한줄 코드를 이해하는 거에 중점을 두고 까먹지 않기 위해 블로그를 써보려고 한다.

< for문을 활용한 포켓몬 데이터 GET 요청 연습 (참고 블로그) >

function App() {
  const [pokemonNames, setPokemonNames] = useState([]);

  useEffect(() => {
    const getData = async () => {
      try {
        const allpokemonList = [];
        for (let i = 1; i <= 100; i++) {
          const res = await instance.get(`/pokemon/${i}`);
          const speciesRes = await instance.get(`/pokemon-species/${i}`);
          const koreanName = speciesRes.data.names.find(
            (name) => name.language.name === "ko"
          );
          allpokemonList.push({ ...res.data, koreanName: koreanName.name });
        }

        setPokemonNames(allpokemonList);
      } catch (error) {
        console.error(`error ${error}`);
        alert("오류가 있습니다. 콘솔을 확인해주세요");
      }
    };
    getData();
  }, []);

  return ()
}

export default App;

1. 포켓몬 전체 데이터가 들어갈 공간인 useState로 데이터의 상태를 관리하려고 한다. 데이터가 들어갈 공간을 pokemonNames로 이름을 작명하고, 초기값을 빈 배열로 설정했다.

2. 데이터가 처음 렌더 시 한 번만 불러와야 되기 때문에 useEffect 훅에서 불러왔다.

3. axios 라이브러리 설치 후에 데이터를 요청할 건데 axios를 사용할 때에는 보통 try/catch 와 async/await은 같이 쓴다고 보면 된다. 이 방법이 비동기 코드를 처리하는데 가장 간편하게 처리할 수 있고, 오류 확인도 쉽게 가능하다.

4. useEffect 안에 들어갈 데이터를 요청하는 함수를 getData로 만들었다.

5. allpokemonList의 변수를 만들어준다. 이 변수 안에는 포켓몬 이미지와 한국어 이름을 가진 포켓몬 100마리의 대한 데이터를 넣어줄 것이다. 그 다음에 pokemonNames안에 넣어줘서 화면에 렌더링 시키려고 한다.

6. /pokemon/${i} 이 경로로 데이터 요청을 할 건데 i는 for문으로 돌릴 것이기 때문에 URL 파라미터에 동적으로 포켓몬 id가 들어온다. 사실 id가 직접적으로 들어온다기 보다는 내가 만든 i 변수가 숫자 100이 될 때까지 1씩 계속 더해서 동적으로 들어올 수 있게 만드는 방법이다.

7. res와 speciesRes로 요청을 2번 날리는 거에 처음에는 의문이 들었다... poke-API문서를 잘 보면 pokemon에서는 포켓몬 이미지를 불러올 수 있고, pokemon-species에서는 각각의 포켓몬 이름을 한국어로 불러올 수 있기 때문에 2번 요청을 해준 것이다.

8. 데이터 요청을 보냈으면 한국어로 포켓몬 이름을 불러오는데에 복잡함을 느낄 것이다.. 블로그를 참고해서 불러오는 방법을 알아냈다. pokemon-species경로에 접근해서 객체로 타고타고 들어가서 보면 이상해씨가 나온다. names에는 한국어 정보가 들어있는데 find 메서드로 names를 순회하면서 name.language.name에 접근하여 값이 ko와 일치하는 데이터만 찾아주는 조건문을 만들었다.

9. 만들어뒀던 초기값이 빈 배열인 allPokemonData 에 push 메서드로 새객체를 넣어준다. …response.data로 기본 정보들을 복사하고 그 뒤에는 key가 korean_name이고, value 가 koreanName.name인 속성을 추가하여 새로운 객체를 만든다. koreanName.name에는 한국어 이름을 가진 포켓몬이 들어있다.

10. 결과적으로 allPokemonData 에 추가한 것이기 때문에 처음에 상태 저장으로 만들어 뒀던 setPokemonData(allPokemonData); 에 넣고, getData() 함수 호출까지 하면 끝 !

---

< map 메서드를 활용한 포켓몬 데이터 GET 요청 연습 >

위 코드랑 비슷한 부분이 있기 때문에 겹치는 부분은 생략해서 작성했다.

function App() {
  const [list, setList] = useState([]);

  useEffect(() => {
    const getData = async () => {
      try {
        /** 메인 포켓몬 리스트 */
        const mainRes = await instance.get("/pokemon");

        /** 각 포켓몬 상세 데이터 (이미지 추출용) */
        const result = await Promise.all(
          mainRes.data.results.map(async (pokemon, i) => {
            const detailRes = await instance.get(pokemon.url);

            /** 각 포켓몬 species 데이터 (한글 이름용) */
            const speciesRes = await instance.get(detailRes.data.species.url);
            return {
              id: i + 1,
              name: speciesRes.data.names[2].name,
              imageUrl: detailRes.data.sprites.front_default,
            };
          })
        );
        setList(result);
      } catch (error) {
        console.log("error", error);
      }
    };
    getData();
  }, []);

  return ()
}

1. mainRes 변수에 pokemon 데이터를 요청해서 담아준다.

2. Promise.all로 map을 감싸주고 그 안에서 mainRes.data.results로 접근해 배열안에 포켓몬 데이터를 하나씩 순회하면서 url주소를 받아온다. 이유는 각각의 포켓몬 url 데이터를 받아오기 위해서이고, 이는 이미지를 받아오기 위함이다.

   Promise.all 그게 뭐지 ?

   솔직히 Promise.all은 오늘 처음 써본다. map메서드를 Promise.all로 감싸준 이유에 대해서 설명해보자면 Promise.all의 개념은 여러 개의 프로미스를 동시에 실행하고 모든 프로미스가 이행될 때까지 기다린 후 결과를 배열로 반환하는 특징이 있다. 한 개라도 실패시 전체가 실패하므로 이 주의점도 알고 있으면 좋을 것 같다.

   포켓몬 데이터를 예시로 들어보자면 async/await으로 데이터를 요청했을 때에는 한 줄 한 줄 동기적 코드처럼 보이게 실행되지만 실제로는 비동기 작업이 순차적으로 진행되므로 요청 시간이 길어질 수 있다. 예를 들어 포켓몬 5마리를 불러오는 요청이라고 가정했을 때 각 요청이 1초 걸리면 전체 소요 시간은 5초가 되지만 Promise.all은 동시에 코드가 실행되기 때문에 이론적으로 1초로 단축될 수 있다.

   근데 왜 map을 Promise.all로 감싸줘야 할까 ?

   이건 사실 Promise.All의 특징을 몰랐을 때 들었던 의문이다. 그래서 의문점을 해결하고자 찾아봤는데 신기한 사실을 알게됐다. map은 동기적으로 실행된다. 근데 만약에 map메서드 안에서 비동기적인 코드나 async 함수를 호출하게 되면 각 호출은 비동기 코드로 실행 된다는 점이다.

   즉 이때 콜백이 반환하는 값으로 Promise를 반환한다. 여기서 map은 Promise들을 기다리지 않고 바로 다음 요소로 넘어가기 때문에 map의 결과로 생성된 배열은 Promise로 채워진다는 의미이다.

   전체적으로 요약해보자면 map으로 순회한 요소들의 값은 Promise를 즉시 실행하지만 결과를 기다리지 않기 때문에 정상적인 값이 들어오는 게 아니라 Promise객체의 값이 들어온다고 생각하면 된다.

   난 요소를 반환하고 싶은데 그럼 어떻게 해야 될까 ? 방법은 간단하다 !! map 외부에 Promise.all로 감싼다. 이렇게 되면 모든 비동기 작업이 완료된 후에 결과를 처리할 수 있다.

3. 객체가 반환이 잘 됐다면 이 전체적인 코드는 result 변수에 담아서 setList 상태 변화 함수에 넣어준다. 이렇게 되면 이 모든 데이터는 list State가 상태를 관리해주는 것을 알 수 있다.

4. getData()로 함수 호출까지 하면 끝 !
   

---

코드 비교

for문이랑 map을 비교했을 땐 for문은 요소가 하나씩 순차적으로 실행되지만 map은 동시에 실행되어 전체 로딩 속도도 빨라졌고,

for문에서는 URL 경로를 하드 코딩으로 고정 해놓아서 만약 원본 데이터의 경로가 수정 될 경우 정상 작동하지 않을 위험성이 있다. 근데 map으로 포켓몬 데이터를 불러와서 객체 접근 방식을 활용하여 URL에 접근했기 때문에 이 부분에서 봤을 때 유지보수 면에서 더 안전해진 것 같다.

---

뭔가 코드 비교를 하면서 블로그에 대해서 안 좋은 점들만 얘기한 것 같은데,, 블로그를 참고해서 GET요청 연습을 할 때 요청하는 방법과 코드의 흐름에 대해서 알게 되었고, api문서를 이해하는데 정말 많은 도움이 되었다.

➕ name: speciesRes.data.names[2].name 한국어를 가져오는 코드인데 일단은 인덱스로 불러와봤다. 혼자서 다시 GET요청 연습을 한 후에 코드는 수정 될 예정이다.

---

2024-09-28 GET 요청 연습

//연습 코드

function App() {
  const [pokemonData, setPokemonData] = useState<Pokemon[]>([]);

  useEffect(() => {
    const getData = async () => {
      try {
        //메인 포켓몬 리스트 (포켓몬 데이터 200개 요청)
        const mainRes = await instance.get("/pokemon", {
          params: {
            limit: 200,
          },
        });
        const result: Pokemon[] = await Promise.all(
          mainRes.data.results.map(async (pokemonItem: { url: string }) => {
            // 포켓몬 상세 데이터 (이미지 불러오기)
            const urlRes = await instance.get(pokemonItem.url);

            //포켓몬 species 데이터 (포켓몬 한글 이름 데이터 불러오기)
            const speciesRes = await instance.get(urlRes.data.species.url);

            //포켓몬 이미지 추출
            const imageURL =
              urlRes.data.sprites.versions["generation-v"]["black-white"]
                .animated["front_default"];

            //포켓몬 한국어 이름 추출
            const koreanName = speciesRes.data.names.find(
              (koreanName: { language: { name: string } }) =>
                koreanName.language.name === "ko"
            );
            //포켓몬 데이터 반환
            return {
              id: urlRes.data.id,
              imgURL: imageURL,
              name: koreanName.name,
            };
          })
        );
        setPokemonData(result);
      } catch (error) {
        console.error("error", error);
        alert("오류를 확인하세요");
      }
    };
    getData();
  }, []);

  return (
  );
}

export default App;

막힌 부분

1. getData 함수 호출 오류

• get요청하는 함수를 try 안에 넣어놓고는 왜 함수 호출이 안 되지 하고 있었다..

2. 포켓몬 url 경로안에 있는 데이터 접근 불가

• mainRes 요청 후에 map을 돌리고 url 요청을 해야 하는데 url을 객체 접근 방법으로 불러와도 경로 안에 있는 데이터에 접근할 수 있다고 생각했다.

  데이터를 받아온 상태가 아니기 때문에 너무나도 당연하게 undefined가 나왔다.. 다시 get 요청 후에 콘솔로 찍어보니 url안에 있는 pokemon data를 확인할 수 있는 상태가 되었다.
  

3. 포켓몬 한글이름 데이터를 가져오기 위한 url요청하는 방법

• 포켓몬 한글 이름 데이터를 뽑기 위해서 /pokemon-species에서 요청하면 되는 줄 알았으나 이렇게 하게 되면 urlRes로 요청한 코드 안에 species 속성이 이미 있는데 또 다시 같은 코드를 불러오기 때문에 비효율적이고, 중복된 코드가 생긴다.

  결론은 기존에 mainRes데이터 안에 보면 한국어 데이터를 가진 spacies 프로퍼티가 있으니까 이쪽으로 데이터를 요청하면 된다는 것을 알게 되었다.
  

4. promise.All 사용 방법

• promise.All 사용할 때 앞에 await안 붙이면 promise 객체가 반환되니까 이 점도 주의해야 할 것 같다

위에 적은 내용들은 GET요청 연습을 하면서 막혔던 부분들이다.. poke-api 문서는 봐도봐도 진짜 어려운 것 같고, 막혔던 부분들이 많은 것 같아서 내일 한번 더 만들어 봐야 될 것 같다... 코드를 이해하는 것과 실제로 나혼자서 코드를 짜는 건 상상한 것 이외로 너무 어려웠다.