*** 노마드코더에서 무료로 강의해주는 ReactJS 강의를 보고 개인적으로 정리한 내용입니다. ***
이제 추가할 내용은
영화의 여러 정보들을 출력하게끔 하는 것이다.
강의를 듣다 보니 이상적인 코드는
“웹으로 표현되는 모든 조각들을 div와 같은 태그로 작성해준 코드”라는 생각이 들었다.
이에 맞게끔 loading 안내 문구도 태그로 감싸주고
출력되는 영화의 정보(제목, 제작년도, 줄거리, 포스터)도 태그로 감싸주었다.
(img에서의 alt는 마우스를 포스터에 올려놓을 때 영화의 제목이 나오게끔 해주는 역할을 한다.)
(위 코드는 movies.js의 일부분이다.)
App.js의 코드도 위와 같이 적절한 태그로 작성해주었다.
대충 이런 식으로 전체적인 골격이 생겼다!
추가적으로 각 영화의 장르를 추가할 것이다.
우선적으로 할 작업은 Movie.js파일에서 propTypes에 장르 항목을 추가해서 React 컴포넌트에 prop으로 넘어오는 입력값들이 어떤 타입을 가져야하는지 정의하는 것이다.
Api를 본 결과 genre는 문자열의 배열 형태였다.
PropTypes이 배열인 경우에는 위처럼
PropTypes.arrayOf(PropTypes.문자형).isRequired 로 작성하면 된다.
그리고 App.js가 render하는 내용은 movie.js가 넘겨주는 Movie()이므로 Movie에도 genres를 추가한다.
이렇게 장르까지 성공적으로 추가했다.
그런데 아직 해결해야할 오류가 있다.
console창을 확인해보면,
이런 에러 메시지가 있다.
Map에 있는 각각의 item은 key가 필요한데 우리가 key를 부여하지 않았다는 것이다.
이전에는 movie 전체를 map했기 때문에 api에 기본적으로 주어진 id를 이용해서 key를 할당할 수 있었다. 하지만 이 경우 id가 따로 없는 genres prop을 map한 것이기 때문에 key를 줄 수 없다.
이 경우 다른 방법을 쓰면 된다.
사실 map()은 사용자에게 item에 하나씩 대응되는 0부터 시작하는 index 값도 함께 제공한다.(item number)
이 값을 id로 사용해주면 된다.
위와 같이 map()에서 기본적으로 제공해주는 item number를 key로써 부여하면 오류가 발생하지 않는다.
