18 - 영화 앱 다듬기

- 영화 정보 표시

• 영화 포스터 이미지
• 제목
• 개봉 연도
• 장르
• 등급
• 시놉시스

 

- App.css 내용 모두 삭제

App.css 에 있는 내용을 모두 삭제하자.

 

- 영화 API 장르 키 살펴보기

 

- Movie 컴포넌트에 genres props 넘겨주기

App 컴포넌트 --> Movie 컴포넌트에 genres props 넘겨준다고 가정하고 작성한다.

function Movie({ title, year, summary, poster, genres}) {  // 여기 genres 인자 추가
  return (
    <div class="movie">
      <img src={poster} alt={title} title={title} />
      <div class="movie__data">
        <h3 class="movie__title">{title}</h3>
        <h5 class="movie__year">{year}</h5>
        <p class="movie__summary">{summary}</p>
      </div>
    </div>
  );
}

Movie.propTypes = {
  year: PropTypes.number.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  poster: PropTypes.string.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired,  // 여기 genres의 prop-type 추가
};

 

앱을 실행하고 개발자 도구의 console 탭을 보면 경고 메시지 2개가 보인다.

1. 위쪽은 리액트는 클래스 사용 시 class가 아닌 className 으로 써야 한다는 뜻.
2. 아래쪽은 genres props은 isRequired 인 필수인데 Movie 컴포넌트에서 undefined로 넘어왔다는 뜻.

 

- App 컴포넌트 수정

genres 가 undefined 인 상태를 수정한다.

App 컴포넌트에서 Movie 컴포넌트로 genres props 전달하면 됨.

App.js 를 보자.

<Movie
    key={movie.id}
    id={movie.id}
    year={movie.year}
    title={movie.title}
    summary={movie.summary}
    poster={movie.medium_cover_image}
    genres={movie.genres}  // 여기 수정
/>

수정을 했다면 undefiend 경고 메시지는 사라진다.

 

- class 속성 이름 className 으로 변경

HTML에서는 class가 맞는데 리액트에서는 아닌 이유가 JSX 때문인데,

HTML 의 class와 자바스크립트의 class라는 이름이 겹치면

혼란이 오기 때문임.

 

App.js, Movie.js 순서대로 class 를 className 으로 수정하기.

=== App.js ===

<section className="container">
  <div className="loader">
    <span className="loader__text">Loading...</span>
  </div>
) : (
  <div className="movies">
  
===================================================
  
=== Movie.js ===
  
<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>
    <p className="movie__summary">{summary}</p>
  </div>

앱 실행해보면 class 속성 경고 메시지도 사라진다.

이런 오류가 한가지 더 있는데,

HTML 의 label 엘리먼트에 for 속성인데,

JSX 에서 <label for="name">이 아닌 <label htmlFor="name"> 으로 작성해야 한다.

 

- 영화 장르 출력

Movie 컴포넌트에서 장르를 출력한다.

genres props 는 배열이니 map() 함수 사용.

ul, li 엘리먼트를 감싸서 출력한다.

Movie.js 를 보자.

<h5 className="movie__year">{year}</h5>
<ul className="movie__genres">
  {genres.map((genre) => {
    return <li className="movie__genre">{genre}</li>
  })}
</ul>
<p className="movie__summary">{summary}</p>

movie__year 과 movie__summary 사이에 movie__genres 추가한다.

 

앱을 실행하면 장르 리스트가 추가됐다.

개발자 도구에 console 탭을 보면 경고 메시지가 보인다.

li 엘리먼트에 key props 를 추가하지 않아서다.

map() 함수에 두 번째 인자로 전달해주면 된다.

 

- li 엘리먼트에 key props 추가

Movie.js 를 보자.

보통 map() 함수의 2번째 인자 이름은 index 라고 지어 주므로,

<ul className="movie__genres">
  {genres.map((genre, index) => {
    return (
      <li key={index} className="movie__genre">
        {genre}
      </li>
    );
  })}

map((genre, index) --> index 추가.

<li key={index} --> 추가

괄호에 주의하여 작성한다.

앱 실행하면 경고 메시지가 사라져 있다.

 

---

여기까지 종합

genres props 추가.

className 수정.

li 엘리먼트에 key props 추가.

map() 두 번째 인자로 index 추가.