웹 프론트엔드/React

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

왕초보코딩탈출 2018. 11. 4. 15:38



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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;
 
cs



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




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





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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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;
 
cs

 

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



저작자표시 비영리 (새창열림)