React - learn - Passing Props to a Component (컴포넌트에 props 전달하기)

 

 

Passing Props to a Component

https://react.dev/learn/passing-props-to-a-component

Passing Props to a Component – React

 

 

props 전달하기!!!

import { getImageUrl } from "./utils.js";

function Profile({ person, size = 80 }) {
    const imageSrc = getImageUrl(person);
    return (
        <section className="profile">
            <h2>{person.name}</h2>
            <img
                className="avatar"
                src={imageSrc}
                alt={person.name}
                width={size}
                height={size}
            />
            <ul>
                <li>
                    <b>Profession: </b>
                    {person.profession}
                </li>
                <li>
                    <b>Awards: {person.awards.length} </b>(
                    {person.awards.join(", ")})
                </li>
                <li>
                    <b>Discovered: </b>
                    {person.discovered}
                </li>
            </ul>
        </section>
    );
}

export default function Gallery() {
    return (
        <div>
            <h1>Notable Scientists</h1>
            <Profile
                person={{
                    imageId: "szV5sdG",
                    name: "Maria Skłodowska-Curie",
                    profession: "physicist and chemist",
                    discovery: "polonium (chemical element)",
                    awards: [
                        "Nobel Prize in Physics",
                        "Nobel Prize in Chemistry",
                        "Davy Medal",
                        "Matteucci Medal",
                    ],
                }}
            />
            <Profile
                person={{
                    imageId: "szV5sdG",
                    name: "Maria Curie",
                    profession: "physicist and chemist",
                    discovery: "polonium (chemical element)",
                    awards: ["Nobel Prize in Physics", "Matteucci Medal"],
                }}
            />
        </div>
    );
}

// utils.jsx

export function getImageUrl(person, size = "s") {
  return "https://i.imgur.com/" + person.imageId + size + ".jpg";
}