C
React list
Previous4 / 22Next
React/Components/Lesson 04

Props

30 min·theory
This chapter
2/4
JavaScript

Props

💡 Why should you learn this?

🎯 It is the foundation of data communication between parent and child components.
💼 The same component can be reused with different data.
⚡ It is the most important concept in React development.
🏢 실무에서는
In real-world projects, a Button component receives label, color, and size as props to create various buttons. A UserCard component receives a name, email, and photo as props to display multiple user cards.

Props — A package sent from parent to child

Real-world analogy: A delivery package

A parent component sends a package of data to its child.
The child receives the package and uses it, but cannot change its contents.

Key characteristics

  • ▸One-way: parent → child only (child → parent is done via callback functions)
  • ▸Read-only: child components cannot directly modify props
  • ▸Any value: strings, numbers, functions, and even components can be passed

Usage

jsx
// Parent (sending)
<Greeting name="Hong Gil-dong" age={25} />

// Child (receiving)
function Greeting({ name, age }) {
  return <p>{name}, welcome! You are {age} years old!</p>;
}
💻 Passing and receiving Props — various types 
// ===== Input: Passing various types of props from parent =====
function App() {
  const user = { name: "Hong Gil-dong", age: 25 };

  return (
    <div>
      {/* Passing string, number, boolean, function, object */}
      <Greeting
        name="Hong Gil-dong"
        age={25}
        isLoggedIn={true}
        onLogout={() => alert("Logout")}
        user={user}
      />
    </div>
  );
}

// ===== Processing: Receiving props in child component =====
function Greeting({ name, age, isLoggedIn, onLogout, user }) {
  // Destructure props directly for use
  return (
    <div>
      <h2>Hello, {name}! ({age} years old)</h2>
      {isLoggedIn ? (
        <button onClick={onLogout}>Logout</button>
      ) : (
        <p>Login required</p>
      )}
      <p>Object props: {user.name}</p>
    </div>
  );
}

// ===== Setting default props values =====
function Badge({ label = "Default", color = "gray" }) {
  // Specify default values to prevent undefined
  return (
    <span style={{ background: color, padding: "2px 8px" }}>
      {label}
    </span>
  );
}

💡 💡 Props tips

  • ▸Destructuring: use the ({ name, age }) pattern
  • ▸Optional: mark optional props with ?
  • ▸extends: inherit HTML attributes (React.InputHTMLAttributes)
  • ▸React 19: use use(Context) instead of props drilling

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

⚛️ React pattern — Props

Learn step by step how Props are used in React, with code examples.
1 🧩 1. Define a component
A function is a component
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}
↓
2 📤 2. Pass Props
One-way data flow from parent → child
<Greeting name="Hong Gil-dong" />
↓
3 🔁 3. Reuse
Same component, rendered multiple times with different props
<Greeting name="Alice" />
<Greeting name="Bob" />
↓
4 💡 4. One-way data flow
When a child needs to update the parent's state, it receives a callback function via props

📤 Props — passing data from parent to child

Edit the code directly and it 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 quiz

What happens when you try to modify props inside a child component?
💡 Props are read-only. For a child to change the parent's data, the parent must pass down a setState function as a prop. This one-way data flow is the core of React!
Read this first: Component Basics
Up next: Conditional Rendering
PreviousListNext
Props - React