tech - 연관 포켓몬 이동이 제대로 안나오는 이슈 수정하기

안녕하세요 이번에는 1.0.0 버전을 업데이트 하며 가장 어려우면서도 가장 쉬운 방법으로 해결했던 이슈를 적어보려고 합니다.

이슈 내용

연관 포켓몬 이동시 해당 포켓몬의 정보가 나오지 않았던 이슈

• 해당 부분에서의 이슈 발생은 미처 생각하지 못했던 부분이었습니다
• 8세대 포켓몬을 업데이트한 뒤 화면에 제대로 표시가 되는지 확인을 하던 중 우라오스 포켓몬의 정보에서 치고마로 이동할 때 해당 포켓몬이 아닌 우라오스의 정보가 그대로 표시되는 부분이 있었습니다.
• 해당 부분에서는 다른 포켓몬을 확인했을때 같은 이슈가 발생하지 않아 특정 포켓몬의 데이터가 잘못 저장되어 데이터베이스의 수정이 필요하다고 판단했었습니다.
• 하지만 9세대의 포켓몬 업데이트 이후 다시 확인을 했을 때 같은 이슈를 가진 포켓몬을 확인하였고 해당 이슈가 노말폼을 가진 포켓몬들만 발생 한다는 것을 알게 되었습니다.

원인

• 해당 부분에 대해 원인을 찾아보았을 때 노말폼에 대한 데이터가 지워지지 않고 남아있어 표시가 되는 부분이었습니다.

// 수정하기 전 기존 코드

const { data: { getSinglePokemon } = {} } = useQuery<PokemonDetail['single']>(
  GET_POKEMON,
  {
    variables: {
      number: parseInt(number, 10),
    },
    fetchPolicy: 'no-cache',
    onCompleted(data) {
      if (data.getSinglePokemon.isForm !== true) {
        setLoading(() => false)
      }
    },
  }
)

...

const [getForm, { data: { getNormalForm } = { getNormalForm: [] } }] =
  useLazyQuery<PokemonDetail['normalForm']>(GET_NORMAL_FORM)

...

React.useEffect(() => {
  if (getSinglePokemon && getSinglePokemon.isForm) {
    getForm({
      variables: { number: parseInt(number, 10) },
      onCompleted() {
        setLoading(() => false)
      },
    })
  }
}, [getForm, getSinglePokemon, number])


  const initialValue = {
    detailInfo: getSinglePokemon,
    normalFormInfo: getNormalForm,
    ...
}

• 현재 코드에서는 단일 정보를 가져오기 위한 쿼리 요청을 한 뒤 해당 데이터에 노말폼 여부를 확인하여 노말폼에 대한 정보를 요청하는 구조를 가지고 있습니다.
• 이렇게 요청하여 받은 데이터는 detail page에서 가지고 있는 데이터에 대한 context를 생성하여 관리하게 되는데 해당 부분에서 context에 저장되어 있는 노말폼에 대한 데이터가 갱신되지 않고 남아있어 해당 데이터를 보여주는 것이 원인이었습니다.
• 코드를 작성하며 페이지가 이동됨에 따라 context에 대한 내용도 같이 초기화가 되는 것으로 알고있었지만 context는 새롭게 갱신되는것이 아닌 변경되는 데이터에 대해서만 업데이트가 이루어져 노말폼에 대한 이벤트를 보내지 않기에 해당 부분에 대한 데이터가 새롭게 갱신되지 않고 남아있는 문제였습니다.

해결 방안

• 해당 방법에 대해서 처음엔 노말폼의 체크를 이용하여 없을 경우에는 context의 데이터를 직접 변경을 하는 방법을 사용하려 했지만 해당 방법을 사용하게 된다면 detail page에 대한 상태 데이터를 선언 된 이후 추가적으로 변경을 하게 되는것이라 불변성이 유지되지 않게 되기 때문에 적용하지 않았습니다.
• 이후 context 내부에서만 해결하는것이 아닌 페이지가 이동됐을 때의 렌더링 되며 실행되는 함수들과 네트워크 요청을 확인하여 가장 기본적인 새로운 포켓몬에 대한 정보를 요청하는 부분에서 변경을 주는것이 맞다고 생각 되었습니다.
• 그리하여 해결 방법으로 페이지가 이동되며 데이터를 요청하고 데이터를 기반으로 값을 지정할 때 해당 데이터의 노말 폼 여부를 체크하여 노말폼이 존재하지 않다면 빈 배열로 선언하는 방식으로 수정하였습니다.

const initialValue = {
  ...
  normalFormInfo: getSinglePokemon?.isForm ? getNormalForm : [], // 포켓몬의 정보를 가져올 때 폼 여부 체크
  ...
}

결과

• 실질적인 수정 코드는 1줄이었지만 해당 부분을 수정함으로써 페이지가 렌더링 된 이후 context의 상태를 직접적으로 수정하지 않고 정상적으로 이용할 수 있도록 기능을 하였습니다.
• 이번 수정으로 인해 context의 구조와 방식 대해 조금 더 알 수 있는 경험이 되었고 이번 경험으로 인해 현재 코드에서 머무르지 않고 조금 더 최적화하고 좋은 성능을 낼 수 있는 방법에 대한 실마리를 잡을 수 있게 되었습니다.