Universe movie project, genre 처리 에러

Universe Project
영화 정보를 불러오는 웹사이트 프로젝트를 진행 하던 중, 찜 목록 페이지를 구현 하던 중, 에러가 발생해 해결하는데 2일 소요됐다.

발생한 문제점

현재 프로젝트에서는 MovieCard라는 컴포넌트를 통해서 카드 형태로 영화 타이틀, 장르, 포스터의 정보를 랜더링 해주고 있다.

MovieCard 컴포넌트로 landingPage나 MoviePage에서 정보를 잘 출력해주고 있었는데,
찜 목록 페이지에서만 렌더링이 안되는 문제가 발생했다.

TypeError: Cannot read properties of undefined (reading 'map')
    at showGenre (http://localhost:3000/static/js/bundle.js:1654:39)
    at MovieCard (http://localhost:3000/static/js/bundle.js:1680:19)
    at renderWithHooks 

문제점의 원인 찾기

에러 메시지에서 알 수 있듯, MovieCard 컴포넌트 안에 있는 showGenre함수에서 문제가 발생 중이였다. showGenre함수 안에서 movie의 장르 이름을 하나씩 렌더링 해줘야하는데 안에 값이 'undefined'로 비어 있기 때문에 문제가 발생.

showGenre(movie?.genre_ids).map((name)=> (
	<Badge key={name} className="movie-badge">{name}</Badge>
))

하지만 찜 목록 페이지를 제외하고는 정상적으로 작동해서, movieCard로 전달되는 prop에 문제가 있다고 판단했다.

여기서부터 console에 데이터를 하나하나 찍어보며 찾은 결과, 원인을 발견했다.

원인

MovieCard로 전달되는 props안에 데이터를 확인 해본 결과

찜 목록 페이지를 제외한 다른 페이지에서 전달 될 때**: movie.genres_ids
찜 목록 페이지에서 전달 될 때: movie.genres

즉 props로 전달되는 movie 객체가 장르 정보를 다르게 전달하고 있다는 점이 문제점이였다.

해결방법

showGenre(movie?.genre_ids, movie?.genres)

두 데이터 모두 전달해서

// genreIdList가 있을 경우
        if (genreIdList && Array.isArray(genreIdList)) {
            genreIdList.forEach((id) => {
                const genreObj = genreData.find((genre) => genre.id === id);
                if (genreObj) {
                    genreNameList.push(genreObj.name); // 장르 이름 추가
                }
            });
        }

// genres가 있을 경우
        if (genres && Array.isArray(genres)) {
            genres.forEach((genre) => {
                if (genre.name) {
                    genreNameList.push(genre.name); // 장르 이름 추가
                }
            });
        }

두 가지의 경우로 나눠서 처리했다.

사실 원인만 알아내면 쉽게 해결될 일이지만, props안에 같은 데이터를 보내는데 특정 데이터 하나만 다르게 전달하고 있을 줄은 미처 몰라서 찾는데 시간이 오래걸렸다..