6. Array.map 한가지만으로 타이틀과 포스터 props하기

이전에는 복붙형식으로 영화수만큼 넣었으나

API에서 많은 양의 영화정보를 불러온경우엔?

어레이사용하면 된다.

Array를 통해 리스트를 만들면 Array하나만으로 타이틀과 포스터를 출력할 수 있다.

 

리스트에는 여러 오브젝트(타이틀, 포스터들)들이 존재한다.

 

새로운 array. map은 array안의 엘리먼트이다.

arr.map(callback(currentValue[, index[, array]])[, thisArg])

App.js

import React, { Component } from 'react';
import './App.css';

// Movie.js 컴포넌트 불러오고
// div밑에 해당 컴포넌트 이름쓰기
import Movie from './Movie'; 

// Array
const movies = [
  {
    title : "Lion King",
    poster : "https://hips.hearstapps.com/digitalspyuk.cdnds.net/18/47/1542927533-lion-king-poster.jpg"
  },
  {
    title : "Man of Steel",
    poster : "https://images-na.ssl-images-amazon.com/images/I/51OrrZRXTvL._SY445_.jpg"
  },
  {
    title : "The Giver",
    poster : "https://upload.wikimedia.org/wikipedia/en/thumb/0/02/The_Giver_poster.jpg/220px-The_Giver_poster.jpg"
  },
  {
    title : "The Big Short",
    poster : "https://images-na.ssl-images-amazon.com/images/I/91dC4o8mScL._SL1500_.jpg"
  }
]

// 나열된 영화이름 배열로 삽입
class App extends Component {
  render() {
    return (
      <div className="App">
        {movies.map(movie=>{ // movies어레이를 잡고 mapping
          return <Movie title={movie.title} poster={movie.poster}/> // movies array의 엘리먼트를  토대로 한 컴포넌트 제작
        })}
      </div>
    );
  }
}

// index.js에 컴포넌트 export위함
export default App; 

return <Movie title={movie.title} poster={movie.poster}/> // 이 코드 하나만으로

// 하단과 동일한 여러 코드의 역할을 수행한다.
<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} />

 

{ movies.map(movie=>{

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

})}

map은 새로운 array를 만든다.

map기능을 통해 1개의 argument "movie"를 얻음

movie는 현 사이클의 현재 엘리먼트를 의미

 

그런데

엘리먼트가 많은 경우 key를 줘야한다.

key는 고유해야한다.

{ movies.map(movie=>{

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

})}