React 무료로 배울 수 있나요?

네, 코드마스터의 React 강의는 전부 무료입니다. 광고도 없습니다. 개념노트는 로그인 없이 열람할 수 있습니다.

React 초보자도 따라갈 수 있나요?

네. 모든 레슨이 개념 설명 → 코드 예시 → 인터랙티브 데모 → 확인 퀴즈 순서로 구성되어 있어 사전 지식 없이도 따라올 수 있습니다.

React 학습에 얼마나 걸리나요?

각 레슨은 평균 30~60분 분량입니다. 하루 1~2개 기준 약 1~2개월이면 카테고리 전체를 완주할 수 있습니다.

JavaScript

Props

💡 왜 배워야 할까요?

🎯 부모와 자식 컴포넌트 간 데이터 통신의 기본입니다.

💼 같은 컴포넌트를 다양한 데이터로 재사용할 수 있습니다.

⚡ React 개발의 가장 중요한 개념입니다.

🏢 실무에서는

실무에서는 Button 컴포넌트에 label, color, size를 props로 전달해 다양한 버튼을 만듭니다. UserCard 컴포넌트에 이름, 이메일, 사진을 props로 넘겨 여러 사용자 카드를 표시합니다.

Props — 부모에서 자식으로 보내는 택배 상자

실생활 비유: 택배 상자

부모 컴포넌트가 자식에게 데이터를 담은 택배를 보냅니다.
자식은 택배를 받아서 사용하지만, 내용물을 바꿀 수는 없습니다.

핵심 특성

▸단방향: 부모 → 자식만 (자식 → 부모는 callback 함수로)
▸읽기 전용: 자식에서 props 직접 수정 불가
▸어떤 값이든: 문자열, 숫자, 함수, 컴포넌트도 전달 가능

사용법

jsx

// 부모 (전송)
<Greeting name="홍길동" age={25} />

// 자식 (수신)
function Greeting({ name, age }) {
  return <p>{name}님, {age}세 환영합니다!</p>;
}

💻 Props 전달하고 받기 — 다양한 타입

// ===== 입력: 부모에서 다양한 타입의 props 전달 =====
function App() {
  const user = { name: "홍길동", age: 25 };

  return (
    <div>
      {/* 문자열, 숫자, boolean, 함수, 객체 전달 */}
      <Greeting
        name="홍길동"
        age={25}
        isLoggedIn={true}
        onLogout={() => alert("로그아웃")}
        user={user}
      />
    </div>
  );
}

// ===== 처리: 자식 컴포넌트에서 props 수신 =====
function Greeting({ name, age, isLoggedIn, onLogout, user }) {
  // 구조분해할당으로 props를 바로 꺼내 사용
  return (
    <div>
      <h2>안녕하세요, {name}님! ({age}세)</h2>
      {isLoggedIn ? (
        <button onClick={onLogout}>로그아웃</button>
      ) : (
        <p>로그인이 필요합니다</p>
      )}
      <p>객체 props: {user.name}</p>
    </div>
  );
}

// ===== props 기본값 설정 =====
function Badge({ label = "기본", color = "gray" }) {
  // 기본값을 지정해 undefined 방지
  return (
    <span style={{ background: color, padding: "2px 8px" }}>
      {label}
    </span>
  );
}

💡 💡 Props 팁

▸구조분해: ({ name, age }) 패턴 사용
▸Optional: ?로 선택적 props 표시
▸extends: HTML 속성 상속 (React.InputHTMLAttributes)
▸React 19: Props drilling 대신 use(Context) 활용

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

⚛️ React 패턴 — Props

Props을 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로 받음

📤 Props — 부모→자식 데이터 전달

코드를 직접 수정하면 0.7초 후 자동 반영됩니다. React 18 + Babel로 브라우저에서 즉시 실행.

🖥️ 실행 결과 — 렌더링된 React 컴포넌트

✏️ React 코드 수정하기 (클릭해서 열기)

⚛️ React 18 + Babel Standalone — 결과 먼저 확인 후 코드 편집기에서 직접 수정해볼 수 있습니다.

확인 퀴즈

자식 컴포넌트에서 props를 수정하려 하면?