C
React 목록
이전3 / 22다음
React/컴포넌트/Lesson 03

컴포넌트 기초

30분·theory
이 챕터
1/4
JavaScript

컴포넌트 기초

💡 왜 배워야 할까요?

🎯 React의 가장 핵심 개념이며 모든 것의 기초입니다.
💼 큰 화면을 작은 부품으로 나누어 관리할 수 있습니다.
⚡ 같은 UI를 여러 곳에서 재사용하여 개발 속도를 높입니다.
🏢 실무에서는
실무에서는 Header, Footer, Sidebar, ProductCard 같은 컴포넌트를 만들어 조립합니다. 예를 들어 쇼핑몰에서 상품 카드 컴포넌트를 한 번 만들면 수백 개의 상품 목록에서 재사용할 수 있습니다.

컴포넌트 — 레고 블록처럼 조립하는 UI

실생활 비유: 레고 블록

레고로 집을 만들 때 벽/창문/지붕 블록을 조립합니다.
React 컴포넌트도 Button/Card/Header처럼
작은 UI 조각을 조립해 화면을 만듭니다.

왜 배우나요?

  • ▸재사용: 한 번 만든 Button을 수백 곳에서 사용
  • ▸분리: 각 컴포넌트가 독립적 → 유지보수 쉬움
  • ▸테스트: 작은 단위로 테스트 가능

컴포넌트 규칙

1. 이름은 반드시 대문자로 시작 (Button ✅, button ❌)

2. JSX를 반환해야 함

3. 하나의 루트 요소 반환 (또는 Fragment <> )

함수형 컴포넌트 기본 형태

jsx
function Button() {
  return <button>클릭</button>;
}
💻 Button, Card, UserProfile 컴포넌트 
// ===== 재사용 가능한 Button 컴포넌트 =====
function Button({ label, onClick, color = "blue" }) {
  // 입력: label(텍스트), onClick(함수), color(색상)
  // 처리: 스타일 적용
  // 출력: 버튼 JSX
  return (
    <button
      onClick={onClick}
      style={{ backgroundColor: color, color: "white", padding: "8px 16px" }}
    >
      {label}
    </button>
  );
}

// ===== 카드 컴포넌트 =====
function Card({ title, description, imageUrl }) {
  return (
    <div className="card">
      {imageUrl && <img src={imageUrl} alt={title} />}
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
}

// ===== 사용자 프로필 컴포넌트 (Button 재사용) =====
function UserProfile({ name, email, avatar }) {
  const handleFollow = () => alert(`${name}님을 팔로우했습니다!`);

  return (
    <div className="profile">
      <img src={avatar} alt={name} width={60} />
      <h2>{name}</h2>
      <p>{email}</p>
      {/* Button 컴포넌트를 재사용 */}
      <Button label="팔로우" onClick={handleFollow} color="green" />
    </div>
  );
}

// ===== App에서 조립 =====
export default function App() {
  return (
    <div>
      <UserProfile name="홍길동" email="[email protected]" avatar="/avatar.png" />
      <Card title="React 학습" description="컴포넌트 기반 UI 개발" />
    </div>
  );
}

💡 💡 컴포넌트 설계 팁

  • ▸작게 유지: 100줄 이하가 이상적
  • ▸Props 타입: TypeScript interface 필수
  • ▸기본값: default parameter 활용
  • ▸합성 패턴: Card.Header 같은 서브 컴포넌트

이 개념은 React 컴포넌트 개발에서 핵심적입니다. 리액트의 선언적 UI 패러다임을 이해하고, props와 state의 차이를 명확히 구분하세요. 컴포넌트는 입력(props)에 대해 항상 동일한 출력(JSX)을 반환하는 순수 함수처럼 동작해야 합니다.

⚛️ React 패턴 — 컴포넌트 기초

컴포넌트 기초을 React에서 어떻게 쓰는지 코드와 함께 단계별로 익혀보세요.
1 🧩 1. 컴포넌트 정의
함수가 곧 컴포넌트
function Greeting({ name }) {
  return <h1>안녕, {name}!</h1>;
}
↓
2 📤 2. Props 전달
부모 → 자식으로 데이터 단방향 흐름
<Greeting name="홍길동" />
↓
3 🔁 3. 재사용
같은 컴포넌트, 다른 props로 여러 번
<Greeting name="Alice" />
<Greeting name="Bob" />
↓
4 💡 4. 단방향 데이터 흐름
자식이 부모 state를 바꾸려면 콜백 함수를 props로 받음

🧩 컴포넌트 합성

코드를 직접 수정하면 0.7초 후 자동 반영됩니다. React 18 + Babel로 브라우저에서 즉시 실행.
🖥️ 실행 결과 — 렌더링된 React 컴포넌트
✏️ React 코드 수정하기 (클릭해서 열기)
⚛️ React 18 + Babel Standalone — 결과 먼저 확인 후 코드 편집기에서 직접 수정해볼 수 있습니다.

확인 퀴즈

React 컴포넌트 이름의 규칙은?
💡 React 컴포넌트는 반드시 대문자로 시작해야 합니다. <button>은 HTML 태그로, <Button>은 React 컴포넌트로 구분됩니다. 소문자로 시작하면 React가 HTML 태그로 인식합니다!
먼저 읽으면 좋은 개념: JSX 문법
다음 추천: Props
이전목록다음
컴포넌트 기초 - React