Props란 무엇인가?

Props는 **”properties”**의 줄임말로,
부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용하는 읽기 전용 데이터입니다.

비유하자면 Props는 택배 상자입니다. 부모가 만든 상자를 자식에게 전달하고, 자식은 그 안의 내용을 사용만 합니다.

---

기본 사용법

Step 1. 자식 컴포넌트에서 props를 받아 사용

function Welcome(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

Step 2. 부모 컴포넌트에서 값을 전달

function App() {
  return <Welcome name="지피" />;
}

결과:

안녕하세요, 지피님!

---

비구조화 할당으로 더 깔끔하게

function Welcome({ name }) {
  return <h1>안녕하세요, {name}님!</h1>;
}

자주 쓰는 방식이며 props.name보다 코드가 간결합니다.

---

여러 개의 Props 전달

function Profile({ name, job }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{job}</p>
    </div>
  );
}

function App() {
  return <Profile name="지피" job="AI 개발자" />;
}

---

JSX 안에서 동적 사용

function Badge({ level }) {
  return <span className={level === 'high' ? 'red' : 'blue'}>{level}</span>;
}

---

Props는 읽기 전용 (수정 불가)

function WrongExample(props) {
  props.name = "민수"; // ❌ 이렇게 직접 수정하면 안 됨
}

props를 수정하려면 상위 컴포넌트에서 상태(state)를 변경한 뒤 다시 전달해야 합니다.
즉, props는 “읽기 전용” 데이터입니다.

---

defaultProps (기본값 설정)

function Greeting({ name = "익명" }) {
  return <h1>안녕하세요, {name}님!</h1>;
}

또는 ES6 이전 방식:

Greeting.defaultProps = {
  name: "익명"
};

---

실전 예제

// components/UserCard.js
function UserCard({ username, email }) {
  return (
    <div>
      <h3>{username}</h3>
      <p>{email}</p>
    </div>
  );
}

// App.js
function App() {
  return (
    <div>
      <UserCard username="지피" email="gpt@example.com" />
      <UserCard username="민수" email="minsu@example.com" />
    </div>
  );
}

---

정리 요약

항목	설명
정의	부모 → 자식 컴포넌트로 데이터 전달 방식
형식	<컴포넌트 속성명="값" />
사용법	자식 컴포넌트의 매개변수 또는 props.속성명
읽기 전용 여부	수정 불가, 상태는 useState로 관리
기본값 지정 방법	defaultProps 또는 매개변수의 기본값