React Props

React에서 컴포넌트에 데이터를 전달할 때 props를 사용합니다.
함수에 인자를 전달하는 것과 비슷한 개념이에요.

function greet(name) {
  console.log("Hello", name);
}

→ 위 코드처럼 React 컴포넌트에도 값을 "인자"처럼 전달할 수 있어요!

---

✅ 1. props란 무엇인가?

• props는 "properties"의 줄임말입니다.
• 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용합니다.
• 컴포넌트는 props를 함수의 인자처럼 받아서 사용할 수 있어요.

---

✅ 2. props 기본 예제

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

<Greeting name="Teo" />

---

✅ 3. props의 디폴트 값 설정 (React 19 방식)

React 18까지는 defaultProps를 많이 사용했지만,
React 19에서는 함수 인자에서 직접 디폴트 값을 설정하는 방식이 더 권장됩니다.

function Greeting({ name = "Guest" }) {
  return <h1>Hello, {name}!</h1>;
}

// name이 없으면 "Guest"로 표시
<Greeting />

---

✅ 4. props 객체 자체 넘기기 (spread 연산자)

props를 구성하는 key-value 객체가 따로 있다면,
... spread 연산자를 사용해서 한 번에 넘겨줄 수 있어요.

const userProps = {
  name: "Teo",
  age: 36,
};

function Profile({ name, age }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

<Profile {...userProps} />

---

✅ 5. props로 JSX 또는 컴포넌트 전달하기

props에는 단순한 값뿐 아니라, HTML 태그나 다른 컴포넌트도 전달할 수 있어요!

✅ HTML 태그 넘기기

function Wrapper({ content }) {
  return <div>{content}</div>;
}

<Wrapper content={<strong>Hello</strong>} />

✅ 컴포넌트 넘기기

function Button({ icon }) {
  return (
    <button>
      {icon}
      Click me
    </button>
  );
}

function StarIcon() {
  return <span>⭐</span>;
}

<Button icon={<StarIcon />} />

---

이처럼 props는 React에서 컴포넌트 간 데이터를 주고받는 중요한 도구입니다.
기본값 설정, 객체 전달, JSX 전달 등 다양한 패턴을 익혀두면 컴포넌트를 더 유연하게 설계할 수 있어요!