[React] map

export default function Card() {
  return (
    <div className="card">
      <img src="../images/kattie-zaferes.png" className="card--image" />
      <div className="card--stats">
        <img src="../images/Star 1.png" className="card--star" />
        <span>5.0</span>
        <span className="gray"> (6) • </span>
        <span className="gray"> USA </span>
      </div>
      <p>Life Lessons with Kattie Zaferes</p>
      <p>
        <span className="bold">From $136</span> / person
      </p>

      <img src="../images/wedding.png" className="card--image" />
      <img src="../images/mtbike.png" className="card--image" />
    </div>
  );
}

이거를

export default function Card(props) {
  return (
    <div className="card">
      <img src={`../images/${props.img}.png`} className="card--image" />
      <div className="card--stats">
        <img src="../images/Star 1.png" className="card--star" />
        <span>{props.rating}</span>
        <span className="gray"> ({props.reviewCountry}) • </span>
        <span className="gray"> {props.country} </span>
      </div>
      <p>{props.title}</p>
      <p>
        <span className="bold">From ${props.price} / person</span>
      </p>
    </div>
  );
}

이케 바꿀 수 잇다

import "./styles.css";
import Navbar from "./components/Navbar";
import Hero from "./components/Hero";
import Card from "./components/Card";

export default function App() {
  return (
    <div className="App">
      <Navbar />
      <Hero />
      <Card 
      img="kattie-zaferes.png"
      rating="5.0"
      reviewCount={6}
      country="USA"
      title="Life Lessons with Kattie Zaferes"
      price={136}

       />
    </div>
  );
}
//props
//Card컴포넌트를 props를 받는형식으로
//바꿔서 수영카드 하나만 만들어보기
//template literal `${var}`
//img
//reviewCount
//country
//title
//price

이건 앱 제에스

조크
앱제에스

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

export default function App() {
  return (
    <div className="App">
      <Joke
        setup="고기먹고 난 다음에 쓰는 개는?"
        punchline="이쑤시개"
        upvotes={10}
        downvotes={15}
      />
      <Joke setup="오리를 생으로 먹으면?" punchline="회오리" />
    </div>
  );
}
//Joke 라는 컴포넌트 만들기
//Joke 컴포넌트는 Props 를 받습니다.
//setup이라는 props랑
//puchline이라는 props를 받습니다.
//조크 디스코드에 있는거 두개 정도 아무거나 렌더링 해봅니다
//setup 을 props에 넣지 않으면
//setup을 렌더링하지 않게 세팅해보세요
//setup은 h3로 띄우고
//puchline은 p로 띄우기

조크제에스

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

요소 다루기

import "./styles.css";
//map을 이용해서 colors안에 있는 내용물
//h3로 렌더링 하기
//colors를 Jsx요소로 바꿔서 다 넣으면 됨
export default function App() {
  const colors = ["Red", "Orange", "Yellow","Green"]
  return (
    <div className="App">
      {colors.map(c => <h3>{c}</h3>)}

    </div>
  );
}