[🏐 포켓몬 도감 만들기][개인] 대시보드 렌더링 방법에 대한 고민

주어진 포켓몬 중에서 원하는 포켓몬을 추가할 수 있는 프로젝트를 진행하고 있다.

 

포켓몬은 총 6개를 선택할 수 있고 포켓몬 3개를 선택했으면 3개의 포켓몬이 보이고 선택하지 않은 3개는 기본 이미지가 보여야 한다.

 

선택한 3개와 선택하지 않은 기본 이미지가 한 번에 렌더링이 이루어져야 하는데, 이 렌더링 방식을 어떻게 해주어야 할지 고민한 것을 정리해 보려고 한다.

 

처음 접근 방식과 이슈

처음 생각한 방식은 useState 초기화를 크기가 6인 배열로 만들어버리기

 

아래와 같이 각각의 요소를 null 로 초기화한 크기가 6인 배열을 useState 로 설정하였다. (당시엔 이게 최선이라고 생각함)

하지만 이렇게 해버리니까 사소한 문제점들이 발생하기 시작했다. 😇

 const [selectedPokemon, setSelectedPokemon] = useState(Array(6).fill(null));

 

1. add 메서드의 복잡성

아래 코드는 seletedPokemon 에 데이터 한 개를 추가하는 함수이다.

const addPokemon = (newPokemon) => {
  setSelectedPokemon((prev) => {
  
    const emptyIndex = prev.findIndex((pokemon) => pokemon === null);

    if (emptyIndex !== -1) {
      const updatePokemon = [...prev];
      updatePokemon[emptyIndex] = newPokemon;
      return updatePokemon;
    }
    
    return prev;
  });
};

 

단순히 데이터 한 개를 추가하는 로직만 있어도 되는데, 배열에서 null 인 요소를 찾고... 만약 null 인 요소의 인덱스를 찾았으면.. 그 인덱스에 newPokemon 을 넣어주고 있다. 뭔가 복잡하다.

물론 요구사항에 따라 추가 기능 로직은 충분히 복잡해질 수 있다. 하지만 현재 필요한 기능은 어느 조건 없이 그냥 '추가' 버튼을 누르면 그 데이터가 state 에 추가하는 기능일 뿐이다. 

 

2. 제거할 때 null 오류 

아래 코드는 삭제 함수이다.

  const removePokemon = (pokemon) => {
    const updatePokemon = selectedPokemon.filter((p) => {
      return p.id !== pokemon.id;
    });
    setSelectedPokemon(updatePokemon);
  };

 

삭제하려는 데이터의 id 와 다른 것들을 필터하고 필터 된 데이터를 다시 set 하는 방식이다. 이 기능에서 오류가 발생했다.

 

아래는 오류 메시지이다.

Dex.jsx:42 Uncaught TypeError: Cannot read properties of null (reading 'id')
    at Dex.jsx:42:16
    at Array.filter (<anonymous>)
    at removePokemon (Dex.jsx:41:43)
    at onClick (PokemonCard.jsx:22:13)
    at HTMLUnknownElement.callCallback2 (chunk-M324AGAM.js?v=a49fcf27:3672:22)
    at Object.invokeGuardedCallbackDev (chunk-M324AGAM.js?v=a49fcf27:3697:24)
    at invokeGuardedCallback (chunk-M324AGAM.js?v=a49fcf27:3731:39)
    at invokeGuardedCallbackAndCatchFirstError (chunk-M324AGAM.js?v=a49fcf27:3734:33)
    at executeDispatch (chunk-M324AGAM.js?v=a49fcf27:7012:11)
    at processDispatchQueueItemsInOrder (chunk-M324AGAM.js?v=a49fcf27:7032:15)

 

포켓몬을 한 개라도 선택하지 않은 상태이면 selectedPokemon 배열을 순회할 때 null 오류가 발생한다. 물론 null 일 경우 어찌저찌해서 오류가 나지 않도록 할 수 있겠지만 뭔가 복잡하고 맘에 안 든다. 

 

수정한 방식

... 고민끝에 방법을 바꿀 수 있었다. 수정한 방식은 PokemonList 와 PokemonCard 에서 분기처리하는 방식이다. 

 

우선 문제의 시작점인 useState 초기화 방식을 변경하였다. 

const [selectedPokemon, setSelectedPokemon] = useState([]);

 

리스트 출력은 선택한 포켓몬 따로 선택하지 않은 포켓몬 따로 렌더링 되도록 했고 선택하지 않은 포켓몬은 길이를 6으로 정해두고 선택한 포켓몬의 개수를 뺀 개수를 렌더링하도록 했다.

return (
  <StyledSection>
    <h1>나만의 포켓몬</h1>

    <StyledDiv>
      {selectedPokemon.map((pokemon) => {
        return (
          <PokemonCard
            key={pokemon.id}
            pokemon={pokemon}
            removePokemon={removePokemon}
            isSelected={true}
          />
        );
      })}

      {Array.from({ length: 6 - selectedPokemon.length }).map((_, index) => (
        <PokemonCard key={index} />
      ))}
    </StyledDiv>
  </StyledSection>
);

 

포켓몬 카드는 분기 처리를 했다. props 로 전달받은 pokemon 이 있으면 선택한 포켓몬 카드가 렌더링되고, pokemon 이 전달되지 않았으면 선택하지 않은 카드가 렌더링 되도록 했다. 

return pokemon ? (
  <StyledDiv
    onClick={() => {
      navigate(DETAIL_URL + "/" + pokemon.id);
    }}
  >
    <img src={pokemon.img_url} />
    <span>{pokemon.korean_name}</span>
    <span>No.{pokemon.id}</span>

    {isSelected ? (
      <button
        onClick={(e) => {
          e.stopPropagation();
          removePokemon(pokemon);
        }}
      >
        {"삭제"}
      </button>
    ) : (
      <button
        onClick={(e) => {
          e.stopPropagation();
          addPokemon(pokemon);
        }}
      >
        {"추가"}
      </button>
    )}
  </StyledDiv>
) : (
  "없음"
);

 

변경한 방식이 최선은 아닐지라도.. 이전보다 깔끔해진 느낌이다.