반응형
SMALL
4.3 Adding Genres
genres를 props에 포함시키기
<Movie.js>
에서 할 일- Movie.propTypes에
genres:PropTypes.arrayOf(PropTypes.string).isRequired};
포함시키기 - function Movie 인자로 genres 포함시키기
- Movie.propTypes에
<App.js>
에서 할 일- value 설정 ->
genres={movie.genres}
- value 설정 ->
- HTML에서는 태그 내 class는 class로 사용해도 되지만 Javascript는 component class와 혼란스러워해서 태그 내 class는 className으로 사용
genres 디자인하기
<ul className="genres">
{genres.map(genre=>(
<li className="genres_genre">{genre}</li>
))}
</ul>
Warning: Each child in a list should have a unique "key" prop.
에러뜸
- map 에 있는 각 item은 key가 필요하기 때문
- map fuction은 2개의 argument 가짐
- ex) {genres.map((genre,index)=>( ))}
- argument 이름은 무관
- genre: 현재의 item
- index: item number -> 이 item number를 key로 적용
최종
function Movie({year,title,summary,poster,genres}){
return (
<div className="movie">
<img src={poster} alt={title} title={title}/>
<div className="movie_data">
<h3 className="movie_title">{title}</h3>
<h5 className="movie_year">{year}</h5>
<ul className="genres">
{genres.map((genre,index)=>(
<li key={index} className="genres_genre">{genre}</li>
))}
</ul>
<p className="movie_summary">{summary}</p>
</div>
</div>);
}
반응형
LIST
'Web 강의 > ReactJS로 영화 웹 서비스 만들기' 카테고리의 다른 글
[노마드코더/ReactJS로 영화 웹 서비스 만들기]5.0 Deploying to Github Pages & 5.1 Are we done? (0) | 2022.03.23 |
---|---|
[노마드코더/ReactJS로 영화 웹 서비스 만들기]4.4 Styles Timelapse & 4.5 Cutting the summary (0) | 2022.03.18 |
[노마드코더/ReactJS로 영화 웹 서비스 만들기]4.2 Styling the Movies (0) | 2022.03.18 |
[노마드코더/ReactJS로 영화 웹 서비스 만들기]4.1 Rendering the Movies (0) | 2022.03.18 |
[노마드코더/ReactJS로 영화 웹 서비스 만들기] 4.0 Fetching Movies from API (0) | 2022.03.18 |