[React] List Map

• 리스트 맵 사용하기
  

App.js 파일을 이용하여

간단하게 Map에다가 맵핑하여서 사용 하기 위하려고 한다.

그전장을 참조 할것. 계속해서 이어져 나갑니다

• 소스코드

import React,{ Component } from 'react';

import './App.css';

import Movie from './Movie';

const moviesTitle = [

  "Matrix",

  "Full Metal Jacket",

  "Oldboy",

  "Star Wars"

]

const moviesImage = [

"https://d2e111jq13me73.cloudfront.net/sites/default/files/styles/share_link_image_large/public/screenshots/csm-movie/the-hunger-games-ss1.jpg?itok=EFSm-KAL",

"https://cdn1.thr.com/sites/default/files/imagecache/landscape_928x523/2017/05/full_metal_jacket_1987_3-h_2017.jpg",

"https://i.ytimg.com/vi/2HkjrJ6IK5E/hqdefault.jpg",

"https://lumiere-a.akamaihd.net/v1/images/swbfii_keyart_clean_final_flat_8d03e069.jpeg?region=0%2C37%2C1024%2C576&width=600"

]

const movies = [

    

    {

        title:"matrix",

        poster:"https://d2e111jq13me73.cloudfront.net/sites/default/files/styles/share_link_image_large/public/screenshots/csm-movie/the-hunger-games-ss1.jpg?itok=EFSm-KAL"

    

    },

    {

        title:"full metal jacket",

        poster:"https://cdn1.thr.com/sites/default/files/imagecache/landscape_928x523/2017/05/full_metal_jacket_1987_3-h_2017.jpg"

        

    },

    

    {

        title:"Oldboy",

        poster:"https://i.ytimg.com/vi/2HkjrJ6IK5E/hqdefault.jpg"

        

    },

    

    {

        title:"Star Wars",

        poster:"https://lumiere-a.akamaihd.net/v1/images/swbfii_keyart_clean_final_flat_8d03e069.jpeg?region=0%2C37%2C1024%2C576&width=600"

        

    }

]

class App extends Component {

    render() {

        return (

        <div className="App">

            // 여기서 movie는배열이라고 생각 파라미터

            

            

            {movies.map(movie =>{

                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} />

       

        </div>

        );

    }

}

export default App;