[React] movie_app//3. Lists with map

const title = [

'무비1',

'무비2',

'무비3',

'무비4'

]

const poster = [

'https://az720974.vo.msecnd.net/blog/sass.png',

'https://cdn-images-1.medium.com/max/1200/0*UR0r5pSLQbvP_yUo.png',

'https://www.atulhost.com/wp-content/uploads/2016/02/ruby-on-rails.jpg',

'http://mblogthumb4.phinf.naver.net/MjAxODAxMTBfMTM4/MDAxNTE1NTU1ODc5MTk0.42pl6F-FISNE6XbWKxkLfIvCMizTFlx

d3Wm1ph-J4S4g.ecTO50jeZk4-KdNJfi5vHRxeFDIn1e0spox-hCO-jcsg.JPEG.complusblog/django-logo-negative.jpg?type

=w800'

]

class App extends Component {

render() {

return (

<div className="App">

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

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

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

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

기존에 컴포넌트에 props를 추가해주기 위해서 다음과 같이 사용하였다.

하지만 데이터가 4개가 아니라 수만개가 있다면..?

그것을 해결하기 위해 map메소드를 이용하였다.

const movies = [

{

title : '무비1',

poster : 'https://az720974.vo.msecnd.net/blog/sass.png'

},

{

title : '무비2',

poster : 'https://cdn-images-1.medium.com/max/1200/0*UR0r5pSLQbvP_yUo.png'

},

{

title : '무비3',

poster : 'https://www.atulhost.com/wp-content/uploads/2016/02/ruby-on-rails.jpg'

},

{

title : '무비4',

poster : 'http://mblogthumb4.phinf.naver.net/MjAxODAxMTBfMTM4/MDAxNTE1NTU1ODc5MTk0.42pl6F-FISNE6XbWKx

kLfIvCMizTFlxd3Wm1ph-J4S4g.ecTO50jeZk4-KdNJfi5vHRxeFDIn1e0spox-hCO-jcsg.JPEG.complusblog/dja

ngo-logo-negative.jpg?type=w800'

}

]

class App extends Component {

render() {

return (

<div className="App">

{movies.map(movie =>{

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

movies와 같은 Array를 list라고 부르는 것 같다.

여튼 다음과 같은 Array를 만들고

movies.map()과 같이 함수를 사용하는데

속성의 값으로 함수가 들어가고

함수의 파라미터 값은 새로 만들어질 Array의 네임이다.

movie라는 Array를 새로 만들고

Movie에 title라는 속성을 만들고 그 값은 movie의 title(이때 map에 의해 movies의 데이터가 movie에 맵핑된다.)

poster라는 속성을 만들고 그 값은 movie.poster가 된다.