포트폴리오 시리즈 03 - 02 포켓몬 api를 활용한 포켓몬 도감

lovely·2023년 2월 6일

포트폴리오 제작일기

목록 보기

2/12

포트폴리오 기록글

✅ 포켓몬API
✅ 포켓몬 API Doc
✅ 포트폴리오 Git

진행상황

버튼을 누르면 랜덤으로 포켓몬 실루엣이 보여짐

진행 예정

포켓몬 실루엣을 랜덤으로 보여줌 ✅

포켓몬을 계속 랜덤으로 불러오면 데이터낭비가 예상되므로 버튼을 사용해 랜덤 선택이 되는듯한 효과를 주려고 함

버튼을 누르면 선택한 포켓몬의 정보를 보여줌 ✅
도감 양옆으로 넘기면 다른 포켓몬 정보가 보여짐
히스토리 && 페이지네이션✨✨✨

이슈발생 01

정상동작

다른 포켓몬 찾기
숫자 앞뒤로 넘기기

이슈

다른포켓폰 찾기 후 catch할 때 정보가 넘어가지 않음
리액트 자체의 성질 때문인 것으로 추측

해결

  const handleOther = () => {
    setRandom(randomNumber);
    // setCatchPoke(null);
  };

카드를 다시 섞을 때 setCheckPoke에 null을 설정해 둔것ㅠㅠ 자세히 잘 살펴보자..!

이슈발생 02

이슈

catchPoke정보가 props으로 넘어왔지만 state에 적용되지 않음

해결

함수 자체를 컴포넌트에 props으로 넘겨버림

  const previousPoke = () => {
    if (random < 1) {
      return setCatchPoke(1007);
    } else {
      return setCatchPoke((prev) => prev - 1);
    }
  };

  const nextPoke = () => {
    if (random > 1008) {
      return setCatchPoke(1);
    } else {
      return setCatchPoke((prev) => prev + 1);
    }
  };
        <PokeDevice
          catchPoke={catchPoke}
          previousPoke={previousPoke}
          nextPoke={nextPoke}
        />

이슈발생 03

이슈

useQuery를 사용했더니 데이터 딜레이가 발생
mutation과 invalidate로 해결해 봐야겠다.

해결

하룻밤 자고나서 정말 간단하게 해결했다.
핸들캐치로 몬스터를 잡자마자 스테이트 변경된 값을 url에 넘겨줬었으나
스테이트 변경된 값이 아닌 결과값을 바로 넘겨줬더니 해결!
이름이 바로바로 변경되는 것을 확인할 수 있다!

 async function pokeName(randomNum) {
    return axios
      .get(`https://pokeapi.co/api/v2/pokemon/${randomNum + 1}`)
      .then((res) => res.data);
  }
  const { data: monster } = useQuery(["monster", catchPoke], () =>
    pokeName(random)
  );

  const handleCatch = () => {
    setCatchPoke(random);
    pokeName(random);
  };