문제상황:
노마드 코더의 ReactJS로 영화 웹 서비스 만들기의 #7.5 React Router 부분에서 에러로그가 뜨며 로딩화면이후의 path="/" route의 Home 컴포넌트가 제대로 실행되지 않았다.
해결방법:
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
function Movie({ coverImg, title, summary, genres }) {
if(genres){
return (
<div>
<img src={coverImg} alt={title} />
<h2>
<Link to="/movie">{title}</Link>
</h2>
<p>{summary}</p>
<ul>
{genres.map((g) => (
<li key={g}>{g}</li>
))}
</ul>
</div>
);}else{
return (
<div>
<img src={coverImg} alt={title} />
<h2>
<Link to="/movie">{title}</Link>
</h2>
<p>{summary}</p>
<ul>
장르 없음
</ul>
</div>
);
}
}
Movie.propTypes = {
coverImg: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
summary: PropTypes.string.isRequired,
genres: PropTypes.arrayOf(PropTypes.string).isRequired,
};
export default Movie;if문으로 prop으로 받은 genres배열이 있는지 확인하여 없는 경우에는 '장르없음'이라고 나타내게 하였다.
원인분석:
사진의 25번째 줄에서 genres의 propsTypes를 문자열 배열이 requied하게 설정해놓았다. 그러므로 genres 값의 타입이 맞지 않으면 콘솔에서 에러 로그를 보여줄 것이다.
movie api에서 받은 json데이터를 뜯어보니 사진의 요소 3과 같이 genres 문자열 배열이 있는게 대부분이었지만,
요소 4와 같이 몇몇 요소는 genres 문자열 배열이 누락된 경우가 있어 `undefined`라고 로그가 뜬 것이다.
728x90
