Array.prototype.map() 활용하기

map() 메소드를 활용하여 각 배열의 값을 일일이 컴포넌트에 전달하도록 코드를 작성하는 번거로움을 줄여보자

import React, { Component } from 'react';

import './App.css';

// Movie.js에서 Movie 클래스를 가져온다

import Movie from './Movie'

const movieTitles = [

  "Matrix",

  "Oldboy",

  "Terrace House",

  "Suits",

]

const movieImages = [

  "https://cdn.vox-cdn.com/thumbor/veUKpCnSKflt86VfCpTfyUqEfYQ=/0x0:1280x720/1200x800/filters:focal(538x258:742x462)/cdn.vox-cdn.com/uploads/chorus_image/image/52198011/c6f5a81cb0fcc1c0e5ae3cba9cc4f40ae35476cb.0.jpeg",

  "https://static01.nyt.com/images/2018/10/18/arts/18terracehouse/18terracehouse-articleLarge.jpg?quality=75&auto=webp&disable=upscale",

  "https://cdn.vox-cdn.com/thumbor/GltBWgYa-A_SKHFx2CKHEr93Zvw=/0x0:5760x3840/1200x0/filters:focal(0x0:5760x3840):no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/9898277/_DSC_I1A7700.JPG",

  "https://i.ytimg.com/vi/4qBl7_t0M_U/maxresdefault.jpg",

]

// extends를 사용하여 Component를 가져와야 App 이름의 컴포넌트를 만들 수 있다

class App extends Component {

  render() {

    return (

      <div className="App">

        {/* Movie 컴포넌트에 title, poster 값을 각각 담아준다 */}

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

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

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

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

      </div>

    );

  }

}

export default App;

배열의 요소가 늘어날수록 그만큼 컴포넌트에 전달하는 데이터가 늘어 코드량이 늘어난다.

• movieTitles, movieImages 변수를 movies로 통합하여 객체 형태로 2개의 데이터를 담아 배열에 담는다.
• map() 메소드를 활용하여 반복적인 코드를 줄인다.

import React, { Component } from 'react';

import './App.css';

// Movie.js에서 Movie 클래스를 가져온다

import Movie from './Movie'

const movies = [

  {

    title: "Matrix",

    poster: "https://cdn.vox-cdn.com/thumbor/veUKpCnSKflt86VfCpTfyUqEfYQ=/0x0:1280x720/1200x800/filters:focal(538x258:742x462)/cdn.vox-cdn.com/uploads/chorus_image/image/52198011/c6f5a81cb0fcc1c0e5ae3cba9cc4f40ae35476cb.0.jpeg",

  },

  {

    title: "Oldboy",

    poster: "https://static01.nyt.com/images/2018/10/18/arts/18terracehouse/18terracehouse-articleLarge.jpg?quality=75&auto=webp&disable=upscale",

  },

  {

    title: "Terrace House",

    poster: "https://cdn.vox-cdn.com/thumbor/GltBWgYa-A_SKHFx2CKHEr93Zvw=/0x0:5760x3840/1200x0/filters:focal(0x0:5760x3840):no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/9898277/_DSC_I1A7700.JPG",

  },

  {

    title: "Suits",

    poster: "https://i.ytimg.com/vi/4qBl7_t0M_U/maxresdefault.jpg",

  }

]

// extends를 사용하여 Component를 가져와야 App 이름의 컴포넌트를 만들 수 있다

class App extends Component {

  render() {

    return (

      <div className="App">

        {/* movies 배열에 map() 메소드를 사용하여 각 객체의 데이터를 컴포넌트로 전달 */}

        {/* index는 각 객체에 id 값을 넣어주며 key값으로 전달한다 */}

        {movies.map((movie, index) => {

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

        })}

      </div>

    );

  }

}

export default App;

 

map() 메소드는 배열의 모든 요소에 하나씩 작성된 함수를 통해 새로운 배열 형태로 반환한다.

각 요소에 id 값을 주기 위해 index를 추가로 작성할 수 있다.