13. React/리액트 array.map 이해하기

import React, { Component } from 'react';
import './App.css';
import Movie from './Movie';
 
 
const movies = [
  {
    title:"완벽한 타인",
    poster:"http://www.newsinstar.com/data/photos/20180937/art_15367158497873_e15bff.jpg"
  },
  {
    title:"보헤미안 랩소디",
    poster:"http://image.cine21.com/resize/cine21/poster/2018/0518/12_06_54__5afe434e1f297[H800-].PNG"
  },
  {
    title:"창궐",
    poster:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9te4ZPkCjmfMbzua__AogoVkO8_pSQg_k9HLioQM6B2lPPnix7w"
  },
  {
    title:"암수살인",
    poster:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKpaFaBzed4mShvSJPVD2vQf4W618DFT8OFa-KNAPTuJLTWi5x"
  },
  {
    title:"미쓰백",
    poster:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT53iAJpVivS5RAVVNB_MoEs_a6sTOcbv2tA2XhNgz6ovcj6Yeq"
  }
]
 
class App extends Component {
  render() {
    return (
      <div className="App">
      {console.log(movies)}
        {movies.map(movie =>{
            console.log(movie)
            var a= <Movie title={movie.title} poster={movie.poster} />
            
          return a;
        })}
      </div>
    );
  }
}
 
export default App;
 

movies 를 Json 타입으로 만들고 출력을 해보니  배열에 들어가있다. length 또한 5로 나온다. 

map을 사용하여 movies 를 movie로 리스트를 만들어서 다시 찍어보니까  object만 출력이됨 ㄷㄷ

고로 movies[0].title , movies[1].title  이렇게 해줄 이유가 없음 

import React, { Component } from 'react';
import './App.css';
import Movie from './Movie';
 
 
const movies = [
  {
    title:"완벽한 타인",
    poster:"http://www.newsinstar.com/data/photos/20180937/art_15367158497873_e15bff.jpg"
  },
  {
    title:"보헤미안 랩소디",
    poster:"http://image.cine21.com/resize/cine21/poster/2018/0518/12_06_54__5afe434e1f297[H800-].PNG"
  },
  {
    title:"창궐",
    poster:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9te4ZPkCjmfMbzua__AogoVkO8_pSQg_k9HLioQM6B2lPPnix7w"
  },
  {
    title:"암수살인",
    poster:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKpaFaBzed4mShvSJPVD2vQf4W618DFT8OFa-KNAPTuJLTWi5x"
  },
  {
    title:"미쓰백",
    poster:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT53iAJpVivS5RAVVNB_MoEs_a6sTOcbv2tA2XhNgz6ovcj6Yeq"
  }
]
 
class App extends Component {
  render() {
    return (
      <div className="App">
        {movies.map(movie =>{
          return <Movie title={movie.title} poster={movie.poster} />
        })}
      </div>
    );
  }
}
 
export default App;
 

 

출력해보자 동일하게 잘 출력됨