영화 앱 전체 모습 수정하기
만들 영화 앱은 다음과 비슷하다.
왼쪽 위에 살짝 튀어나온 느낌의 영화 포스터 이미지가 있고,
오른쪽에는 제목, 장르, 평점(별로 표시), 시놉시스 등이 있다.
색은 회색, 흰색을 많이 사용했다.
회원가입 기능이 없다.
<영화 정보>
-영화 포스터 이미지
-제목
-개봉 연도
-장르
-등급
-시놉시스 (영화 줄거리)
App.css 내용 모두 지우기
노마드 코더 영화 API에서 장르 키 살펴본다
아직 추가하지 않은 영화 데이터는 장르이다.
genres 키를 영화 앱에 추가한다.
Movie 컴포넌트에 genres props 넘겨주기
App 컴포넌트에서 Movie 컴포넌트에 genres props를 넘겨준다고 가정하고 Movie 컴포넌트를 수정해보자.
Movie 컴포넌트 인자에 genres를 추가하고, Movie.propTypes에는 genres props가 문자열 배열 arrayOf(PropTypes.string)이며, 반드시 필요함(isRequired)을 추가하자.
영화 앱을 실행하고 콘솔 탭을 열면 경고 메세지 2개가 나온다.
첫번째 경고는 JSX에 사용한 속성 중 className으로 사용되어야 한다는 뜻이다.
두번째 경고는 genres props가 필수(required)인데 Movie 컴포넌트에 undefined로 넘어왔다는 뜻이다.
App 컴포넌트 수정하기
우선, genres가 undefined인 상태를 고친다.
App 컴포넌트에서 Movie 컴포넌트로 genres props를 전달한다.
class 속성 이름 className으로 바꾼다
모든 코드에 있는 JSX의 class 속성 이름을 바꾼다. App.js, Movie.js 파일 모두.
영화 장르 출력하기
Movie 컴포넌트에서 장르를 출력하도록 코드를 수정한다.
genres props가 배열이므로 map()함수를 사용한다.
genres props를 ul, li 엘리먼트로 감싸 출력한다.
브라우저를 보면 장르가 잘 출력된다.
그런데 콘솔 탭을 보면 경고가 1개 있다.
장르를 출력할 때 사용한 li 엘리먼트에 key props를 추가하지 않아서 그런 것이다.
이를 해결하려면, map()함수에 전달할 함수에 두번째 인자를 전달하면 된다.
map()함수에 전달할 함수의 두번째 인자에는
map()함수가 반복 실행하며 반환할 배열 원소의 인덱스가 자동으로 들어온다.
genres.map( (genre, index) => { ... } );
genre에는 genres의 배열 원소가 전달된다.
index에는 1, 2, 3, ... 번째임을 알리는 숫자가 전달된다.
li 엘리먼트에 key props 추가하기
보통 map()함수의 2번째 인자 이름은 index라고 지어 주므로
genres.map( (genre, index) => <li key={index} className="genres__genre">{genre}</li> )와 같이 코드 작성한다.
영화 앱 멋지게 스티일링하기
CSS 파일을 만들어서 적용한다.
App.css 파일 수정하기
글꼴, 배경색 등을 적용한다.
영화 앱 실행하면 달라졌지만, 아직 영화 카드 모양으로 출력되지는 않았다.
Movie.css 파일 수정하기
Movie.css 파일을 수정하면 영화 정보가 카드 모양으로 출력된다.
영화 카드는 브랑저 폭에 따라 크기가 조절된다.
시놉시스 180자로 제한하기
시놉시스는 summary props에 저장된 문자열을 출력한 것이다.
자바스크립트의 slice()함수를 사용한다.
slice()함수
[문자열].slice( 시작, 끝 )
"hereisstring" .slice(0, 10) // "hereisstri"
시작은 0부터이고, 끝은 포함되지 않는다. (=0~9까지 출력, 10자리 문자)
{summary}를 {summary .slice(0, 180) ... }으로 수정한다. 생략 표시로 ... 추가한 것이다.
이런 식으로 긴 글은 줄여서 표시된다.
영화 앱 제목 살펴보기
영화 앱의 제목은 크롬 브라우저 탭에서 볼 수 있다.
바꾸기 전에는 기본값인 React App이라고 되어 있다.
영화 앱 제목 바꾸기
영화 앱 제목은 public 폴더의 index.html 파일을 열어 title 엘리먼트 사이에 넣으면 된다.
영화 앱 제목 아이콘 바꾸기
영화 앱 제목 아이콘은 public 폴더의 favicon.ico 파일을 원하는 아이콘 이미지 파일로 바꾼다.
