[React JS] Updating Component

우리가 만들 것을 이미지로 살펴보면,

(이 자료는 노마드코더 동영상에서 캡쳐하여 가져온 것입니다)

이런 형식이다. 데이터를 가져올 것을 살펴보자.

일단 콘솔 로그를 확인하여 보자.

 _renderMovies = () => {

   const movies = this.state.movies.map((movie) => {

     console.log(movie)

     return <Movie title={movie.title} poster={movie.large_cover_image} key={movie.id} />

   })

   return movies

 }

이 콘솔을 살펴보면, 결론적으로 포스터,제목,장르,설명까지 갖고 있다.

이제 업데이트를 해보자.

제목의 경우 'title-english'를,

포스터는 'small-cover-image'를 입력하고,

장르는 'genres'를,

synopsis를  추가입력한다.

그리고 이제 우리의 props를 업데이트하면 된다.

우리의 movie 컴포넌트에 말이다.

movie.js 파일로 가서

이렇게 추가해준다.

(여기서 small_cover_image가 너무 작아서 medium_cover_image 변경)

이제 html을 좀 더 이쁘게 써보자.

class name은 정상적인 css에서 class를 뜻한다.

하지만 JSK에서는 class name이라고 써야한다.

----생략---

방금한 작업들은 prop을 추가한 작업이다.

장르와 시놉시스와 같은, 이전에는 포스터와 제목밖에 없었지.

그 다음 html작업을 했어. 클래스명 JSX로 추가했어

칼럼-무비포스터 만들고, 제목 만들고, 장르 array를 맵핑하고,

무비 시놉시스클래스를 만들었어.

그리고 alt이미지를 만들었어

 

이미지의 제목이 뜨도록!! 

그리고 장르를 맵핑할 때 movie genre라는 새로운 컴포넌트를 만들었어.

functional 컴포넌트로, 간단한 span을 return 하게끔

*본 포스팅은 노마드 코더에서 공부한 내용을 정리한 것입니다.