C
React list
Previous3 / 22Next
React/Components/Lesson 03

Component Basics

30 min·theory
This chapter
1/4
JavaScript

Component Basics

💡 Why Should You Learn This?

🎯 This is the most fundamental concept in React and the foundation of everything.
💼 You can break a large screen into smaller pieces and manage them individually.
⚡ Reuse the same UI in multiple places to speed up development.
🏢 실무에서는
In real-world projects, you create components like Header, Footer, Sidebar, and ProductCard and assemble them together. For example, once you build a product card component for an online store, you can reuse it across hundreds of product listings.

Components — Assembling UI Like LEGO Bricks

Real-World Analogy: LEGO Bricks

When building a house with LEGO, you assemble wall, window, and roof bricks.
React components work the same way — you assemble small UI pieces like Button, Card, and Header to build a complete screen.

Why Learn This?

  • ▸Reusability: A Button you build once can be used in hundreds of places
  • ▸Separation: Each component is independent → easier to maintain
  • ▸Testing: Can be tested in small, isolated units

Component Rules

1. Names must start with an uppercase letter (Button ✅, button ❌)

2. Must return JSX

3. Must return a single root element (or a Fragment <> )

Basic Functional Component

jsx
function Button() {
  return <button>Click</button>;
}
💻 Button, Card, and UserProfile Components 
// ===== Reusable Button Component =====
function Button({ label, onClick, color = "blue" }) {
  // Input: label(text), onClick(function), color(color)
  // Process: apply style
  // Output: Button JSX
  return (
    <button
      onClick={onClick}
      style={{ backgroundColor: color, color: "white", padding: "8px 16px" }}
    >
      {label}
    </button>
  );
}

// ===== Card Component =====
function Card({ title, description, imageUrl }) {
  return (
    <div className="card">
      {imageUrl && <img src={imageUrl} alt={title} />}
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
}

// ===== User Profile Component (reusing Button) =====
function UserProfile({ name, email, avatar }) {
  const handleFollow = () => alert(`${name} followed you!`);

  return (
    <div className="profile">
      <img src={avatar} alt={name} width={60} />
      <h2>{name}</h2>
      <p>{email}</p>
      {/* Reuse Button component */}
      <Button label="Follow" onClick={handleFollow} color="green" />
    </div>
  );
}

// ===== Assemble in App =====
export default function App() {
  return (
    <div>
      <UserProfile name="Hong Gil-dong" email="[email protected]" avatar="/avatar.png" />
      <Card title="Learning React" description="Component-based UI development" />
    </div>
  );
}

💡 💡 Component Design Tips

  • ▸Keep it small: Ideally under 100 lines
  • ▸Props typing: TypeScript interface is required
  • ▸Default values: Leverage default parameters
  • ▸Composition pattern: Sub-components like Card.Header

This concept is central to React component development. Understand React's declarative UI paradigm, and clearly distinguish between props and state. A component should behave like a pure function — given the same input (props), it always returns the same output (JSX).

⚛️ React Pattern — Component Basics

Learn how to apply component basics in React step by step, with code examples.
1 🧩 1. Defining a Component
A function is itself a component
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}
↓
2 📤 2. Passing Props
Unidirectional data flow from parent → child
<Greeting name="Hong Gil-dong" />
↓
3 🔁 3. Reuse
The same component, used multiple times with different props
<Greeting name="Alice" />
<Greeting name="Bob" />
↓
4 💡 4. Unidirectional Data Flow
For a child to update parent state, it receives a callback function via props

🧩 Component Composition

Edit the code directly and changes will be reflected automatically after 0.7 seconds. Runs instantly in the browser using React 18 + Babel.
🖥️ Result — rendered React component
✏️ React 코드 수정하기 (클릭해서 열기)
⚛️ React 18 + Babel Standalone — see the result first, then edit the code yourself.

Check Your Understanding

What is the naming rule for React components?
💡 React components must always start with an uppercase letter. `<button>` is treated as an HTML tag, while `<Button>` is recognized as a React component. If you start with a lowercase letter, React will interpret it as an HTML tag!
Read this first: JSX Syntax
Up next: Props
PreviousListNext
Component Basics - React