App Component에 HTML 추가

• 우선 리액트에서 class 속성을 사용하기 위해서는 className 을 사용해야한다.

<section className"container"></section>
// App Component가 반환할 JSX의 외부 감싸기

<div className="loader">
  <span className="loader__text"></span>
</div>
// 기존의 Loading... 부분을 감싸준다.

<div className="movies"></div>
//movies.map()을 감싸준다.

Movie Component에 HTML 추가

<div className="movie__data"></div>
// Movie component가 반환할 JSX의 외부 감싸기

목적에 맞게 title, year, summary를 엘리먼트로 감싸준다.
<div className="movie__data">
	<h3 className="movie__title">{title}</h3>
  	<h5 className="movie__year">{year}</h5>
  	<p className="movie__summary">{summary}</p>
  </div>

• 이정보들을 inspect 해보면, 다른 스타일로 출력된다.

영화 포스터 사진 추가

• poster.props를 추가해주자
  • 전체 엘리먼트를 감싸는 div element
  • <div className="movie"></div>

• img element를 movie__data div 위에 추가해서 src속성에는 poster.props를 alt,title 속성에는 title props를 전달한다.

• 앱에서 이미지에 커서를 올리면 alt 속성값이 나온다.

영화 앱 수정하기

• map에 있는 각 item들은 key가 필요하다.
• 하지만 ID가 없는 경우는 제공할 키가 없다.
  • map function 은 또 다른 argument를 제공한다.
    • 현재의 item
    • number of item (index)

Movie Component 에 genres props 추가

• Movie Component argument에 genres 추가
• Movie.propTypes 에 Proptypes.arrayOf(PropTypes.string).isRequired 을 추가해준다.

App Component 수정

• App Component에서 Movie Component로 genres.props 를 전달한다.
  • genres={movie.genres}

영화 장르 출력하기

• Movie Component 에서 장르를 출력하도록 코드를 작성한다
  • genres.props 는 Array 이므로, map() function을 사용한다.
  • genres props를 <ul>, <li> 태그로 감싸준다.

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

홈페이지에 나오게 하기

• npm i gh-pages
• package.JSON 에 hompage 넣기
  • "hompage": "https:{githubID}.github.io/{projectName}"
    단!, 소문자! 띄어쓰기는 안된다
• deploy(build folder upload)-> build folder 를 얻기 위해서는 npm run build-> build folder offer , predeploy command를 만든다.
• deploy를 먼저 호출하면 predeploy가 자동적으로 run 된다.