Map이란?

Map for문과 비슷하지만 몇가지 장점들을 가지고 있는 함수이다.

[1, 2, 3].map()

모든 array 자료에는 map을 붙일 수 있다.

사용법

[1, 2, 3].map(function(){
  console.log(1)
})

위와 같이 사용하면 array의 자료의 갯수 만큼 함수안의 코드를 실행해 준다.
함수의 매개변수은 배열에 있던 자료들이다. 위 코드에서 배열에 있는 값들을 하나씩 출력하는 방식을 map함수를 이용해 작성하면 아래와 같이 나온다.

[1, 2, 3].map(function(a) {
  console.log(a)
})

위와 같이 코드를 짜면 1 2 3이 콘솔에 출력된다.

컴포넌트 복사

// JokesData.js
export default [
  {
    setup: "I got my daughter a fridge for her birthday.",
    punchline: "I can't wait to see her face light up when she opens it."
  },
  {
    setup: "How did the hacker escape the police?",
    punchline: "He just ransomware!"
  },
  {
    setup: "Why don't pirates travel on mountain roads?",
    punchline: "Scurvy."
  },
  {
    setup: "Why do bees stay in the hive in the winter?",
    punchline: "Swarm."
  },
  {
    setup: "What's the best thing about Switzerland?",
    punchline: "I don't know, but the flag is a big plus!"
  }
];

위와 같은 아재개그 데이터들을 출력하는 컴포넌트 Joke.js

export default function Joke(props) {
  return (
    <div>
      {props.setup && <h3>{props.setup}</h3>}
      {props.punchline && <p>{props.punchline}</p>}
      <hr></hr>
    </div>
  );
}

우리는 위 Joke 컴포넌트를 App.js에서 활용할 것 이다.

import "./styles.css";
import Joke from "./components/Joke";
import JokesData from "./components/JokesData";

export default function App() {
  const JokeElements = JokesData.map((joke) => {
    return <Joke setup={joke.setup} punchline={joke.punchline} />;
  });

  return <div className="App">{JokeElements}</div>;
}

Joke.js 와 JokesData.js를 모두 import를 하고
App 함수 안에서 JokeElements 변수에 JokesData들을 하나씩 joke라는 변수에 넣어서
<Joke setup = {joke.setup} punchline = {joke.punchline}></Joke> 의
매개변수 setup과 punchline을 모두 joke라는 매개변수 안에 있는 데이터들을 보내주어서
Joke.js에서 값이 있는지 없는지 판단하고 조건부 렌더링을 이용해서 데이터를 가지고 렌더링한다

props 활용

// Data.js
export default [
  {
    id: 1,
    title: "Life Lessons with Katie Zaferes",
    description:
      'I will share with you',
    price: 136,
    stats: {
      rating: 5.0,
      reviewCount: 6
    },
    location: "Online",
    openSpots: 0
  },
  {
    id: 2,
    title: "Learn Wedding Photography",
    description:
      "Interested in becoming a wedding photographer?",
    price: 125,
    stats: {
      rating: 5.0,
      reviewCount: 30
    },
    location: "Online",
    openSpots: 27
  },
  {
    id: 3,
    title: "Group Mountain Biking",
    description:
      "Experience the beautiful",
    price: 50,
    stats: {
      rating: 4.8,
      reviewCount: 2
    },
    location: "Norway",
    openSpots: 3
  }
];

// Card.js
export default function Card(props) {
  let badgeText;
  if (props.openSpots === 0) badgeText = "SOLD OUT";
  else if (props.location === "Online") badgeText = "ONLINE";

  let country;
  if (props.location === "Online") country = "USA";
  else country = props.location;
  return (
    <div className="card">
      {badgeText && <div className="card--badge">{badgeText}</div>}
      <div classsName="card-stats">
        <img src="../images/star.png" className="card--star" />
        <span>{props.rating}</span>
        <span className="gray">({props.reviewCount}) ·</span>
        <span className="gray">{country}</span>
      </div>
      <p>{props.title}</p>
      <p>
        <span className="bold">From ${props.price}</span> / person
      </p>
    </div>
  );
}

import Card from "./components/Card";
import item from "./components/Data";

const CardData = item.map((item) => {
  return <Card {...item} />;
  // return <Card item = {item} />;
  // return <Card openslote = {item.openslote} ...>
});

export default function App() {
  return (
    <div className="App">
      <section className="cards-list">{CardData}</section>
    </div>
  );
}

우리는 item이라는 이름으로 Data.js 파일의 데이터들을 모두 가지고 온다.
item으로 map 함수를 이용해서 하나씩 들어오는 배열 전체를 props 형식으로 Card 컴포넌트에 보낸다.
배열 하나하나씩을 받은 props에 있는 값들에 Card.js안에서 필요할때마다 접근하여 사용할 수 있다.
주석문과 같이 작성하지 않아도 props를 이용해서 넘어오는 모든 데이터들을 컴포넌트 안에서 자유자재로 사용할 수 있다.

return 문 3개의 차이점!

1. 전개 연산자 ...을 사용해서 item 객체를 분해해서 컴포넌트에 전달하기 때문에 props.reviewCount와 같이 접근할 수 있다.

2. item = {item} 으로 전달하면 item 속성의 값으로 갖는 객체를 컴포넌트에 전달하기 때문에 props.item.reviewCount와 같이 접근해야 한다

3. 마지막에 적혀있는 return 문은 매개변수를 각각 정해줘야 하고 적어주지 못하면 접근하지 못한다는 단점이 있다.