`React` map 메소드 내에서 jsx 반환 오류..

오류 내용

 

선택한 포켓몬이 selectedPokemon에 추가는 되는데 렌더링이 안됨 

알고보니 map 메서드 안에서 {} 중괄호를 사용하면, 코드 블록은 실행되지만

아무것도 반환하지 않기 때문에 실제로 렌더링할 JSX가 없음

map 메서드는 배열의 각 요소에 대해 함수를 실행하고

그 함수가 반환한 값을 새로운 배열에 담아 반환함

코드 확인 ㄱㄱ

올바른 코드

 

selectedPokemon.map((pokemon, index) => {
  if (pokemon) {
    return (
      <PokemonCard
        pokemon={pokemon}
        index={index}
        isSelected={true}
        onAddPokemon={addPokemon}
      />
    );
  } else {
    return (
      <DashBoardItem>
        <DashBoardPokeball src="/img/pokeball.png" alt="포켓볼" />
      </DashBoardItem>
    );
  }
});

 

 

이렇게 하면 return 값인 jsx가 정상적으로 반환되지만

 

 

잘못된 코드

 

selectedPokemon.map((pokemon, index) => {
  if (pokemon) {
    // JSX를 반환하지 않고, 중괄호 내에서만 실행됨
    <PokemonCard
      pokemon={pokemon}
      index={index}
      isSelected={true}
      onAddPokemon={addPokemon}
    />;
  } else {
    // JSX를 반환하지 않고, 중괄호 내에서만 실행됨
    <DashBoardItem>
      <DashBoardPokeball src="/img/pokeball.png" alt="포켓볼" />
    </DashBoardItem>;
  }
});

 

 

해당 코드에선 중괄호 {} 안에 JSX가 있지만 반환되지 않음 왜냐하면 중괄호 {} 안에 있는 코드 블록은

반환 값 없이 실행만 되기 때문에 결과적으로 map 함수는 undefined를 반환삽 그래서 카드가 렌더링 되지 않았던 거임

 

 

요약

 

 

1. map 메서드에서 jsx를 반환할 떄 return을 명시적 반환하기
2. 중괄호 {} 안에 JSX를 넣으면 JSX가 실행되지만 반환되지 않으므로 렌더링 되지 않음