컴포넌트 반복하기 - map

👨🏻‍💻 프롤로그

• 자바스크립트 배열의 map()함수
• 데이터 배열을 컴포넌트 배열로 map하기
• 활용 예제

map() 이란?

• 기존 배열에서 요소를 하나하나 추출해서 새로운 배열을 생성/변환한다.(맵핑한다 = 새롭게 뽑아만든 느낌)
• 배열 요소를 하나씩 처리하기 때문에 루프 처리 작업에서도 활용되며, 각 요소는 인수로 전달된 콜백함수에 의해 처리된다.

언제 map을 사용하는가?

• 배열 안의 요소를 추출해서 함수를 이용해서 새로운 배열을 만들고 싶을 떄
• 배열 요소 전체에 대한 처리 작업을 할 때 → 일부가 아님, 반복문 쓸 필요 x
• id와 이름을 가지는 객체배열에서 id 또는 이름만 가진 배열을 새로 만들고 싶을 때

그럼 이제 map 메서드를 사용해서 컴포넌트를 반복하는 방법을 알아보자

---

const tripPlace = [
    {
        place: "Jeju",
        image: "<https://cdn.crowdpic.net/list-thumb/thumb_l_319B5AA716BAB8C7AACB2D52875E6DD4.jpg>",
    },
    {
        place: "Japan",
        image: "<https://a.cdn-hotels.com/gdcs/production68/d1303/c8fa75d8-6932-459b-9660-8340f097ebd7.jpg>",
    },
    {
        place: "America",
        image: "<https://image.theminda.com/data/tg/image/item/high/201906/a6f59222e5a21779ec7522ceb6e09319.jpg>",
    },
];

서버에서 이렇게 데이터를 받았다고 가정하고 출력해보자

function App() {
    return (
        <div>
            <h1>Hello</h1>
            <h3>I love going on trips.</h3>
            <Trip place="Jeju" />
            <Trip place="Japan" />
            <Trip place="America" />
        </div>
    );
}

이렇게 모든 데이터를 각각의 컴포넌트를 만들어서 복사해야 하므로 비효율적이다
모든 props마다 다른 값을 입력해야 하기 때문이다

🤔 그렇다면 map을 이용한 방법은?

function App() {
    return (
        <div>
            {tripPlace.map((country) => (<Trip place={country.place} />))}
        </div>
    );
}

이렇게 컴포넌트안에 tripPlace 배열의 원소가 country에 하나씩 들어가고 객체 형태로 props를 넘겨준 것이다

🤔 그렇다면 컴포넌트에 image는 어떻게 출력할까?

Parent component

function App() {
    return (
        <div>
            {tripPlace.map((country) => (
                <Trip place={country.place} picture={country.image} />
            ))}
        </div>
    );
}

Child component

function Trip({ place, picture }) {
    return (
        <div>
            <h2>I went to {place}</h2>
            <img src={picture} />
        </div>
    );
}

그리고 props에 추가한다

---

그렇다면 다음 예제를 통해 알아보자

Parent Componrnt - MainItems

function MainItems() {
// 서버에서 받아온 데이터
const placeData = [
    {
      id: '1',
      img: img1,
      desc: '레스토랑 / 카페',
      title: 'rooftop',
      price: '30000원',
      score: '5 ⭐️',
    },
    {
      id: '2',
      img: img2,
      desc: '문화',
      title: 'restaurant',
      price: '20000원',
      score: '4.5 ⭐️',
    },
    {
      id: '3',
      img: img3,
      desc: '레스토랑 / 카페',
      title: 'hotel',
      price: '30000원',
      score: '4 ⭐️',
    },
    {
      id: '4',
      img: img1,
      desc: '문화',
      title: 'bar',
      price: '30000원',
      score: '3.5 ⭐️',
    },
  ];

// 지식 컴포넌트에 전달
  const listData = placeData.map(place => (
    <ItemList
      key={place.id}
      picture={place.img}
      title={place.title}
      price={place.price}
      desc={place.desc}
    />
  ));

  return (
    <>
      <div>
        <p>상품 목록</p>
        <ul>{listData}</ul>
      </div>
    </>
  );
}

map method 를 이용해서 자식 컴포넌트 안에 props를 추가하여 전달한다

Child Component - ItemList

function ItemList({ key, picture, title, price, desc }) {
  return (
    <Card id={key}>
      <img src={picture} />
      <div>
        <p>{desc}</p>
        <p>{title}</p>
        <p>{price}</p>
      </div>
    </Card>
  );
}

그 다음에 자식 컴포넌트에서 전달받은 props를 이용해서 화면에 출력하면 끝!!

https://velog.io/@newsilver1028/React-map-으로-컴포넌트-만들기