✅ React 기초 강좌

🎯 학습 목표

• 하나의 큰 컴포넌트를 어떻게 나누어야 할지 이해한다.
• 공통 UI를 재사용 가능한 컴포넌트로 만드는 방법을 배운다.
• props를 통해 자식 컴포넌트로 데이터를 전달하는 방식을 숙지한다.

✅ 왜 컴포넌트를 분리해야 할까?

UI가 복잡해질수록 하나의 컴포넌트 파일이 커지고 관리하기 어려워지기 때문입니다.

장점

• ✅ 코드 가독성 향상
• ✅ 재사용성과 유지보수 용이
• ✅ 기능별 역할 분담이 쉬움

📦 분리 기준 (언제 나눌까?)

🧱 예시: 유저 정보 컴포넌트를 분리해보기

🎯 목표 구조

App
└── UserList
    ├── UserCard
    └── UserCard

📄 components/UserCard.jsx

function UserCard({ name, age }) {
  return (
    <div style={{ border: '1px solid #ccc', margin: '8px', padding: '12px' }}>
      <h3>{name}</h3>
      <p>나이: {age}</p>
    </div>
  );
}

export default UserCard;

📄 components/UserList.jsx

import UserCard from './UserCard';

function UserList() {
  const users = [
    { id: 1, name: '홍길동', age: 28 },
    { id: 2, name: '김철수', age: 32 },
  ];

  return (
    <div>
      <h2>👤 사용자 목록</h2>
      {users.map((user) => (
        <UserCard key={user.id} name={user.name} age={user.age} />
      ))}
    </div>
  );
}

export default UserList;

📄 App.jsx

import UserList from './components/UserList';

function App() {
  return (
    <div>
      <h1>React 컴포넌트 분리 예제</h1>
      <UserList />
    </div>
  );
}

export default App;

✅ 과제

🧩 1. 아래 컴포넌트 구조를 구현해보세요:

• ProductList 컴포넌트
• ProductCard 컴포넌트 (props로 name, price 전달)
• 상품 배열을 .map()으로 반복 출력

const products = [
  { id: 1, name: '노트북', price: 1200000 },
  { id: 2, name: '무선 마우스', price: 32000 },
];

결과 예시:

상품명: 노트북 / 가격: 1200000원
상품명: 무선 마우스 / 가격: 32000원