개인프로젝트 - 포켓몬 도감

 

 

 

 

1. 문제

<StMyPokemonBoxContainer>
  {selectedPokemon.length === 0 ? (
    <>
      {Array.from({ length: 6 }).map((_, index) => (
        <StEmptyCard key={index}>
          <StImgBall src="https://react-6-pokemon.vercel.app/assets/pokeball-13iwdk7Y.png" />
        </StEmptyCard>
      ))}
    </>
  ) : (
    <StPokemonCard>
      {selectedPokemon.map((pokemon) => {
        return (
          <PokemonCard
            key={pokemon.id}
            pokemon={pokemon}
            isSelected={true}
          />
        );
      })}
    </StPokemonCard>
  )}
</StMyPokemonBoxContainer>

 

 

 

선택된 카드가 없을 때는 포켓볼카드가 노출되다가 포켓몬이 선택되면 선택된 포켓몬카드로 바뀌는 로직을 짜고 싶었다.

위와 같이 코드를 짜보니..

 

 

어라라.. 카드를 선택하니 포켓볼카드가 다 사라지고 선택된 카드만 추가가 된다..

코드를 다시 보니까 비어있을때와 가득 찼을 때만 동작하게 로직을 짜놨더라..

 

 

2. 해결방법

기본적으로 2가지의 로직을 생각해야했다.

 

1. 일반적인 렌더링 로직

- 6개의 카드 슬롯을 반복적으로 생성, 인덱스에 맞는 포켓몬이 있으면 카드를 없으면 빈 카드를 렌더링

 

2. 기본 배열과 map 사용

- 6개의 슬롯을 나타내는 배열을 만들고, 각 슬롯에 대해 렌더링을 결정

 

<StMyPokemonBoxContainer>
  {Array.from({ length: 6 }).map((_, index) => {
    const pokemon = selectedPokemon[index];
    return pokemon ? (
      <PokemonCard
        key={pokemon.id}
        pokemon={pokemon}
        isSelected={true}
      />
    ) : (
      <StEmptyCard key={`empty-${index}`}>
        <StImgBall src="https://react-6-pokemon.vercel.app/assets/pokeball-13iwdk7Y.png" />
      </StEmptyCard>
    );
  })}
</StMyPokemonBoxContainer>

 

코드 리뷰

1. Array.from(){length: 6}

길이가 6인 배열을 생성, 이 배열은 6개의 카드 슬롯을 뜻 함(undefined로 초기화됨)

> 이 배열은 렌더링할 슬롯의 개수를 나타내며, 카드로 채워질지 빈 카드로 남을지 결정하게 됨

 

2. map 메서드 사용

배열의 각 요소에 대해 map 메서드를 사용하여 렌더링할 내용을 결정

index를 사용해서 selectedPokemon 배열에서 해당 인덱스의 포켓몬만 가지고옴

 

3. pokemon 변수

selectedPokemon 배열에서 index 에 해당하는 포켓몬 객체를 가지고 옴.

없으면 undefined가 할당

 

4. 조건부 렌더링

카드가 존재하면 PokemonCard 컴포넌트를 렌더링

없으면 StEmptyCard를 렌더링

 

5. `empty-${index}`

key 값을 줄 때 단순하게 index로 주면 삭제하는 위치에 따라 인덱스가 변경되기 때문에 selectedPokemon의 index와의 충돌이 생길 수 있음.

그래서 문자열이 추가된 고유한 index 값을 Key로 주기 위해 empty - 접두사를 붙여 차별성을 줌

 

 

즉 요약하자면

selectedPokemon 배열의 길이와 관계없이 항상 6개의 undefined 값을 렌더링함.

그리고 selectedPokemon 배열에 따라 카드나 빈 칸으로 채워짐.

배열의 인덱스를 이용해 각 슬롯에 포켓몬이 있는지 확인하게 됨

 

 

 

이제 잘 나오는 카드들~~