✅ React 기초 강좌

📁 파일 구조 예시

src/
├── App.jsx
└── components/
    └── UserCard.jsx

📄 components/UserCard.jsx

function UserCard(props) {
  return (
    <div>
      <p>{props.name}님은 {props.age}세입니다.</p>
    </div>
  );
}

export default UserCard;

또는 구조 분해 할당(destructuring) 방식으로도 작성할 수 있습니다:

function UserCard({ name, age }) {
  return (
    <div>
      <p>{name}님은 {age}세입니다.</p>
    </div>
  );
}

export default UserCard;

📄 App.jsx

import UserCard from './components/UserCard';

function App() {
  return (
    <div>
      <h1>👋 React Props 예제</h1>
      <UserCard name="홍길동" age={30} />
      <UserCard name="김철수" age={24} />
    </div>
  );
}

export default App;

✅ 브라우저 출력 예시

👋 React Props 예제
홍길동님은 30세입니다.
김철수님은 24세입니다.

GitHub - heroyooi/react-app at ch1_3