0Pricing
Next.js 15 Fullstack Web Apps · 강의

속성과 구성 요소 간 통신

유연한 UI를 위해 속성을 사용하여 부모 구성 요소와 자식 구성 요소 사이에 데이터를 전달하는 방법을 익힙니다.

속성과 구성 요소 간 통신은(는) CoddyKit의 무료 Next.js 15 Fullstack Web Apps 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Next.js 15 Fullstack Web Apps 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Next.js 15 Fullstack Web Apps 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Intro to Component Props

In React, props (short for properties) are how you pass data from a parent component down to a child component.

Think of them like arguments to a function. They allow you to make your components reusable and dynamic, displaying different information based on the data they receive.

Unidirectional Data Flow

One of the core principles of React is unidirectional data flow. This means data always moves in one direction: from parent to child.

  • Parent components own and manage data.
  • They pass this data down to their children using props.
  • Child components receive props and render content based on them.
  • Children cannot directly modify the props they receive; props are read-only.

Your First Prop

Let's see how to pass a simple string prop. We'll create a Greeting component that receives a name prop.

Notice how App (parent) passes name="Alice" to Greeting (child).

import React from 'react';
import ReactDOM from 'react-dom/client';

// Child Component
function Greeting(props) {
  // Access the 'name' prop using props.name
  return <p>Hello, {props.name}!</p>;
}

// Parent Component
function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

// Render the App component
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Passing Different Data Types

Props aren't just for strings! You can pass numbers, booleans, arrays, and objects. When passing non-string values, wrap them in curly braces {}.

This example shows a ProductCard receiving various data types.

import React from 'react';
import ReactDOM from 'react-dom/client';

function ProductCard(props) {
  return (
    <div style={{ border: '1px solid gray', padding: '10px', margin: '10px' }}>
      <h3>{props.productName}</h3>
      <p>Price: ${props.price.toFixed(2)}</p>
      <p>In Stock: {props.inStock ? 'Yes' : 'No'}</p>
      <p>Features:</p>
      <ul>
        {props.features.map((feature, index) => (
          <li key={index}>{feature}</li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  const laptop = {
    name: "Super Laptop",
    price: 1200.50,
    available: true,
    specs: ["Fast CPU", "16GB RAM", "512GB SSD"]
  };

  return (
    <div>
      <ProductCard
        productName={laptop.name}
        price={laptop.price}
        inStock={laptop.available}
        features={laptop.specs}
      />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Destructuring Props for Clarity

Accessing props like props.name can get repetitive. A cleaner way is to use object destructuring directly in your component's function signature.

This makes your code more readable by explicitly showing which props a component expects.

import React from 'react';
import ReactDOM from 'react-dom/client';

// Before: function Greeting(props) { return <p>Hello, {props.name}!</p>; }
// After destructuring:
function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}

function App() {
  return (
    <div>
      <Greeting name="Charlie" />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

The Special 'children' Prop

React has a special prop called children. This prop automatically contains whatever content you pass between a component's opening and closing tags.

It's perfect for creating wrapper components like cards, layouts, or modals.

import React from 'react';
import ReactDOM from 'react-dom/client';

function Card({ title, children }) {
  return (
    <div style={{ border: '1px solid #ddd', padding: '15px', margin: '10px', borderRadius: '8px' }}>
      <h4>{title}</h4>
      <div style={{ marginTop: '10px' }}>
        {children}
      </div>
    </div>
  );
}

function App() {
  return (
    <div>
      <Card title="User Profile">
        <p>Name: <b>Jane Doe</b></p>
        <p>Email: jane@example.com</p>
        <button>Edit Profile</button>
      </Card>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Child to Parent: Callback Props

Since data flows down, how does a child component tell its parent something happened (e.g., a button was clicked)? You pass a function as a prop!

The child calls this function, and the parent can then react to the event. This is often called a 'callback prop'.

import React from 'react';
import ReactDOM from 'react-dom/client';

// Child Component
function MyButton({ onClick, label }) {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
}

// Parent Component
function App() {
  const handleButtonClick = () => {
    alert("Button clicked inside the child component!");
  };

  return (
    <div>
      <p>Parent says: Click the button below!</p>
      <MyButton onClick={handleButtonClick} label="Trigger Parent" />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

When Props Aren't Enough

While props are powerful, passing them through many layers of nested components can become cumbersome. This is known as prop drilling.

If you find yourself passing the same prop through 3+ components just to reach a deeply nested child, it might be a sign to consider other patterns like React Context API or state management libraries (which we'll cover in future lessons!).

Prop Challenge

Which of the following statements about React props are true?

Recap: Props, Your UI's Data

You've mastered props, a fundamental concept in React!

  • Props pass data from parent to child components.
  • Data flow is unidirectional; children cannot modify props.
  • You can pass various data types (strings, numbers, objects, functions).
  • Destructuring props makes your code cleaner.
  • The children prop allows flexible content embedding.
  • Callback props enable child-to-parent communication.

Props are the backbone of building dynamic and reusable React components. Keep practicing, and you'll be building complex UIs in no time!

자주 묻는 질문

“속성과 구성 요소 간 통신” 강의는 무료인가요?

네 — “속성과 구성 요소 간 통신” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Next.js 15 Fullstack Web Apps 강의 전체를 잠금 해제할 수 있습니다. Next.js 15 Fullstack Web Apps 강의에는 총 4개의 강의가 포함되어 있습니다.

“속성과 구성 요소 간 통신”에서 뭘 배우나요?

유연한 UI를 위해 속성을 사용하여 부모 구성 요소와 자식 구성 요소 사이에 데이터를 전달하는 방법을 익힙니다. 브라우저에서 직접 실행하는 실습 코드로 Next.js 15 Fullstack Web Apps을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Next.js 15 Fullstack Web Apps을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Next.js 15 Fullstack Web Apps은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“속성과 구성 요소 간 통신” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Next.js 15 Fullstack Web Apps 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Next.js 15 Fullstack Web Apps 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. React 구성 요소와 JSX
  2. 훅을 사용한 상태 관리
  3. 속성과 구성 요소 간 통신
  4. 목록, 키 및 조건부 UI 렌더링
← Next.js 15 Fullstack Web Apps(으)로 돌아가기