[React] map 활용

 

이번포스트에서는 "맵(map)" 을 활용한 예제를 다뤄보려합니다. 

 

아래와같이 여러 view를 만들어주어야한다고 가정해봅시다. 

 

 

그리고 각각 Potato가 가진 구성요소(예를 들면 타이틀과 이미지를 하나씩)는 모두 같고, 이름만 다르게 위와같이 만드려합니다. 

 

이때 우리가 위와같이 만들기위해서 potato라는 함수를 3번 만들어주면 갯수만큼 만들어줘야함으로, 재사용 불가능한 코드가됩니다. 

 

이 문제를 해결하기위해서 맵을 쓰려합니다. 

 

Map을 써야하는 이유

위와같이 이름만 다르게 해주려한다면, 기존 우리가 알고있던 방법으로는 컴포넌트를 3가지를 그려줬어야했습니다. 

 

하지만 오브젝트에, 텍스트 데이터를 모두 집어넣고, map을 통해 그 오브젝트 하나씩 접근하며 

 

같은 타입의 뷰를 컨텐츠 데이터만 바꿔서 리턴하면, 같은 타입의 뷰를 컨텐츠 값만 다르게 리턴할수있습니다. 

 

우선 map을 사용하기전 오브젝트를 만들어, 오브젝트에 potato1 - 3과 이미지를 넣어주도록 하겠습니다. 

 

오브젝트 생성

우선 Food라는 이름의 컴포넌트를 만들어, 재사용될 뷰를 만들겠습니다.

import React from 'react'

function Food( {name , image}){
  return <div>
    <h2>I like {name}</h2>
    <img src = {image}/>
  </div>
}

food에는 name과 image를 prop으로 가지고있고, 이걸 뷰에 나타내주도록하겠습니다. 

 

이제 이 name과 image에 각기 다른 값들이 들어가야합니다. 이 다르게 들어갈 값들을 오브젝트를 만들어 보겠습니다. 

const foodILike = [
  {
    id: 1,
    name: "Potato1",
    image: "https://www.alimentarium.org/sites/default/files/media/image/2017-02/AL027-01_pomme_de_terre_0_0.jpg"
  },
  {
    id: 2,
    name: "Potato2",
    image: "https://www.alimentarium.org/sites/default/files/media/image/2017-02/AL027-01_pomme_de_terre_0_0.jpg"
  },
  {
    id: 3,
    name: "Potato3",
    image: "https://www.alimentarium.org/sites/default/files/media/image/2017-02/AL027-01_pomme_de_terre_0_0.jpg"
  }
]

 

그러면 foodILike에 들거아있는 potato1-3을 어떻게 뷰에 연결해줄수있을까요? 

 

Map 사용

아래 코드를 확인해보겠습니다.

function App() {
  return (
    <div>
      {foodILike.map(dish => (
        <Food key={dish.id} name={dish.name} image={dish.image}/>
        ))
      }

    </div>
    
  );
}

우선 map은 array를 리턴합니다.

 

즉 dish => 이 표시는 우리가 map을 통해 오브젝트의 구성인 potato1 -3까지 array형식으로 하나씩 접근하게되고,

 

반복문처럼 foodILike의 사이즈 만큼 <Food key={dish.id} name={dish.name} image={dish.image}/> 이 코드가 반복하게되어 총 3번 만들어지게됩니다. 

 

그리고 { } 안에 dish.id를 써줬으므로, 오브젝트에 한 덩어리의 id를 불러오게 되고, 이 불러온값이  Food라는 컴포넌트의 key라는 prop에 지정되게됩니다. 

 

그리고 id, name image모두 지정이되면 우리가 가장 처음에 만들어줬던 food component 함수로 가서 name과 image로 들어간후, 뷰가 만들어집니다. 

 

 

완성된 코드 

import React from 'react'

function Food( {name , image}){
  return <div>
    <h2>I like {name}</h2>
    <img src = {image}/>
  </div>
}

const foodILike = [
  {
    id: 1,
    name: "Potato1",
    image: "https://www.alimentarium.org/sites/default/files/media/image/2017-02/AL027-01_pomme_de_terre_0_0.jpg"
  },
  {
    id: 2,
    name: "Potato2",
    image: "https://www.alimentarium.org/sites/default/files/media/image/2017-02/AL027-01_pomme_de_terre_0_0.jpg"
  },
  {
    id: 3,
    name: "Potato3",
    image: "https://www.alimentarium.org/sites/default/files/media/image/2017-02/AL027-01_pomme_de_terre_0_0.jpg"
  }
]

function App() {
  return (
    <div>
      {foodILike.map(dish => (
        <Food key={dish.id} name={dish.name} image={dish.image}/>
        ))
      }


    </div>
    
  );
}

export default App;