[React JS] array map 기능 사용하여 리스트만들기

이번에는 영화 리스트를 만들어볼 것이다.

지난 번에 만든 리스트는 효율적이지 않기때문에..

우리는 api를 이용해서 엄청난 양의 영어정보를 가져올것이다.

그러기 위해서 는 일단, array를 만들 것이다.

const movies = [

  {

    title: "matrix",

    poster: "http://www.phildam.net/include/images/data/board/f73a2a2908feb45c6b8fe4c766e5acb3.jpg"

  },

  {

    title: "Full Metal Jacket",

    poster: "http://postfiles14.naver.net/MjAxNzA0MjNfNzkg/MDAxNDkyOTU2MDk2MTQ3.60GK7pUyGaxHOUUCrQhrpT2kQgLH-5Pe44iZeMd2li0g.IJYh5ehIH3iDyKboF5YQ38DTMlS_J5eKRTr6U-RG61Eg.JPEG.sotptkd2002/Full_Metal_Jacket_poster.jpg?type=w2"

  },

  {

    title: "Oldboy",

    poster: "http://imgmovie.naver.com/mdi/mi/0369/C6944-04.jpg"

  }.

  {

    title: "Star Wars"

    poster: "http://pds21.egloos.com/pds/201512/28/03/b0007603_56810b6ed0e42.jpg"

  }

]

요런 형식으로 바꿔준다.

array들은 'map' 기능이라는게 있다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map 참고

요런 형식으로 작업을 하는것이다.

array 하나를 잡고, 맵핑을 해서 하나의 컴포넌트를 만드는거다.

그 array의 엘리먼트를 토대로 한 컴포넌트인 것이다.

<div className="App">

        {movies.map(movie => {

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

        })}

</div>

Movie 요것은 앞에 꼭 대문자를 넣어줘야한다.

그래야지만 Movie.js 파일이 import가 가능하다.

여기서 movie는 movie.js를 뜻하는 것같다.

자 그러면 우리가 지금 작성한 코드는 

<Movie title={movies[0].title} poster={movies[0].poster} />

<Movie title={movies[1].title} poster={movies[1].poster} />

<Movie title={movies[2].title} poster={movies[2].poster} />

<Movie title={movies[3].title} poster={movies[3].poster} />

이것과 같다.

이게 바로 리스트를 작성하는 방법이다. 연습을 많이 해봐야만 안다.

*본 포스팅은 노마드코더의 동영상 강의를 보고 공부한 내용을 정리한 것입니다.