Mapping components 또 다른 예시 , pass object as props

이렇게 data.js 를 만들어주고

export default [
  {
    id: 1,
    title: "Life Lessons with Katie Zaferes",
    description:
      'I will share with you what I call "Positively Impactful Moments of Disappointment." Throughout my career, many of my highest moments only came after setbacks and losses. But learning from those difficult moments is what gave me the ability to rise above them and reach my goals.',
    price: 136,
    coverImg: "./images/swimmer.png",
    stats: {
      rating: 5.0,
      reviewCount: 6,
    },
    location: "Online",
    openSpots: 0,
  },
  {
    id: 2,
    title: "Learn Wedding Photography",
    description:
      "Interested in becoming a wedding photographer? For beginner and experienced photographers alike, join us in learning techniques required to leave the happy couple with memories that'll last a lifetime.",
    price: 125,
    coverImg: "./images/wedding.png",
    stats: {
      rating: 5.0,
      reviewCount: 30,
    },
    location: "Online",
    openSpots: 27,
  },
  {
    id: 3,
    title: "Group Mountain Biking",
    description:
      "Experience the beautiful Norwegian landscape and meet new friends all while conquering rugged terrain on your mountain bike. (Bike provided!)",
    price: 50,
    coverImg: "./images/bike.png",
    stats: {
      rating: 4.8,
      reviewCount: 2,
    },
    location: "Norway",
    openSpots: 3,
  },
];

원래는 API로 한다는데 그건 나중에 배운다고 한다.
아 그리고 사진은 어떻게 해야할지 몰라서
처음에는 import방법으로 해봤는데 안되서
저렇게 경로 설정해서해줬더니되었다 ㅠㅋㅋ

App.js

import React from "react";
import Navbar from "./components/Navbar.js";
import Hero from "./components/Hero.js";
import Card from "./components/Card.js";
import data from "./data.js";

export default function App() {
  const cards = data.map((item) => {
    return (
      <Card
        key={item.id}
        img={item.coverImg}
        rating={item.stats.rating}
        reviewCount={item.stats.reviewCount}
        location={item.location}
        title={item.title}
        openSpots={item.openSpots}
      />
    );
  });
  return (
    <div>
      <Navbar />
      <Hero />
      <section className="cards-list">{cards}</section>
    </div>
  );
}

data를 저렇게 import해주고
저번에 공부했던대로 map 이용해서 코드 적어줌..

Card.js

import React from "react";

import Star from "../images/star.png";

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

  return (
    <div className="card">
      {badgeText && <div className="card--badge">{badgeText}</div>}
      <img src={`${props.img}`} className="card--image" />
      <div className="card--stats">
        <img src={Star} className="card--star" />
        <span>{props.rating}</span>
        <span className="gray">({props.reviewCount}) • </span>
        <span className="gray">{props.location}</span>
      </div>
      <p>{props.title}</p>
      <p>
        <span className="bold">From ${props.price}</span> / person
      </p>
    </div>
  );
}

여기서 이 부분은

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

array에서 openSpots이 0이라고 되어있는건
sold out이라고 배지에 적어주고
location이 online이면 배지에온라인이라고 적어주는거..
Card.js에 div로 이미 배지 만들어준 상태임

{badgeText && <div className="card--badge">{badgeText}</div>}

여기 이렇게 ㅎㅎ
badgeText가 truthy 하면 (존재하면) 저렇게 text보여라 하는거..

그리고 또 배운거

     <Card
                key={item.id}
                img={item.coverImg}
                rating={item.stats.rating}
                reviewCount={item.stats.reviewCount}
                location={item.location}
                title={item.title}
                price={item.price}
                openSpots={item.openSpots}
            />

이 부분을 보면 props를해주는 리스트가 너무 많다.
그래서 이 부분을 간단하게
이렇게 바꿔주고

import React from "react";
import Navbar from "./components/Navbar.js";
import Hero from "./components/Hero.js";
import Card from "./components/Card.js";
import data from "./data.js";

export default function App() {
  const cards = data.map((item) => {
    return (
      <Card
      key={item.id}
      item={item}
      />
    );
  });
  return (
    <div>
      <Navbar />
      <Hero />
      <section className="cards-list">{cards}</section>
    </div>
  );
}

저렇게 item으로 묶어준다음

Card.js에

import React from "react";

import Star from "../images/star.png";

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

  return (
    <div className="card">
      {badgeText && <div className="card--badge">{badgeText}</div>}
      <img src={`${props.item.coverImg}`} className="card--image" />
      <div className="card--stats">
        <img src={Star} className="card--star" />
        <span>{props.item.stats.rating}</span>
        <span className="gray">({props.item.stats.reviewCount}) • </span>
        <span className="gray">{props.item.location}</span>
      </div>
      <p>{props.item.title}</p>
      <p>
        <span className="bold">From ${props.item.price}</span> / person
      </p>
    </div>
  );
}

props에 items도 추가해서 써주고
참고로 여기서 props이름들은 data.js에 있는 이름을 따라야한다.
위에 예시처럼 item={item} 대신에
spread이용해서
{...item} 이렇게 써줄수도 있음..
이때는 props에 item추가 안해준다.