✅ React 기초 강좌

📄 components/ProductCard.jsx

function ProductCard({ name, price }) {
  return (
    <div style={{ border: '1px solid #ddd', padding: '10px', marginBottom: '10px' }}>
      <p>상품명: {name}</p>
      <p>가격: {price.toLocaleString()}원</p>
    </div>
  );
}

export default ProductCard;

📄 components/ProductList.jsx

import ProductCard from './ProductCard';

function ProductList() {
  const products = [
    { id: 1, name: '노트북', price: 1200000 },
    { id: 2, name: '무선 마우스', price: 32000 },
    { id: 3, name: '키보드', price: 55000 },
  ];

  return (
    <div>
      <h2>🛍️ 상품 목록</h2>
      {products.map((product) => (
        <ProductCard key={product.id} name={product.name} price={product.price} />
      ))}
    </div>
  );
}

export default ProductList;

📄 App.jsx

import ProductList from './components/ProductList';

function App() {
  return (
    <div>
      <h1>React 컴포넌트 분리 & 재사용 예제</h1>
      <ProductList />
    </div>
  );
}

export default App;

✅ 실행 결과 예시

🛍️ 상품 목록

상품명: 노트북
가격: 1,200,000원

상품명: 무선 마우스
가격: 32,000원

상품명: 키보드
가격: 55,000원

GitHub - heroyooi/react-app at ch2_4