[트러블 슈팅] TMDB 공용 API 가져올 때

디테일 페이지에서 장르 데이터를 가져와야 하는데 화면에 뿌려지질 않았다.
console.log()로 찍어보니 undefined가 나왔다.

              {console.log(
                "영화장르",
                "data",
                data?.genres,
                "name",
                data?.genres.name,
                "id",
                data?.genres.id,
              )}

기존 홈페이지에서 장르데이터를 끌어다 쓴 카드의 뱃지를 재사용하기에는 디테일 페이지에 접속했을 때와의 장르 데이터의 키값이 달랐다.
그래서 따로 useQuery를 만들어 가져올 수 밖에 없었다.

data.genres 로는 배열 안에 객체형태로 나열된 것을 확인했는데
data?.genres.name 나 data?.genres.id 로 직접 접근하면 undefined가 떴다.
그래서 해당 부분이 잘못되었구나 하고 배열을 순회하는 map 함수를 돌렸다.

              {console.log(
                "영화장르",
                "data",
                data?.genres,
                "name",
                data?.genres.name,
                "id",
                data?.genres.id,
                "map",
                data?.genres.map((i) => i.name)
              )}

제대로 뜨는 것을 확인했다.
그대로 화면에 적용했다. 뿌려졌다.

그런데 통으로 화면에 적용되는 것을 확인했다.
각 배열의 인덱스를 각각 끊어서 뱃지형태로 보여주고 싶다. 구글링해봤다 . 배열 쪼개기.. slice.. 그런데 찾던 중 slice메서드를 안쓰고 그냥 map 안에서 태그를 써주면 되는 것을 알게 되었다. 적용시켰다.

              {data?.genres.map((item, id) => (
                <Badge bg="danger" key={id}>
                  {item.name}
                </Badge>
              ))}

잘 보여진다.

Ref
함수형 컴포넌트에서 map 사용하기