React 교재 · 입문 5편

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

컴포넌트는 함수, props 는 그 인자. 한 줄로 끝나는 개념 + 4가지 실전 패턴.

부모 컴포넌트에서 자식 카드들로 데이터 토큰이 흘러내리는 일러스트 — Props 단방향 흐름 컨셉

3편에서 만든 <Greeting /> 컴포넌트는 항상 같은 "안녕, React!" 만 출력. 실전에선 컴포넌트가 외부 데이터 (사용자 이름·가격·상태) 를 받아 다르게 그려야 한다. 그 통로가 props.

한 줄 정의 — props 는 함수의 인자. 함수형 컴포넌트가 함수니까, 인자도 받는다. 다만 JSX 문법으로 표현될 뿐. 이번 5편에서 기본 + 구조분해 + 기본값 + children + TypeScript 까지 한 번에.

1. Props 는 함수 인자다

React 가 컴포넌트를 마운트할 때 JSX 속성을 모아 객체 하나로 만들어 함수 첫 인자로 전달.

// Greeting 컴포넌트
function Greeting(props) {
  return <h1>안녕, {props.name}님! (나이: {props.age})</h1>;
}

// 부모에서 사용
function App() {
  return (
    <>
      <Greeting name="박준성" age={42} />
      <Greeting name="홍길동" age={28} />
    </>
  );
}

React 가 내부적으로 Greeting({ name: '박준성', age: 42 }) 으로 호출. JSX 속성이 객체 키, JSX 값이 객체 값. 끝.

속성 값 종류 — 문자열은 따옴표 그대로 (name="박준성"), 숫자·boolean·객체·함수·JSX 는 모두 중괄호 (age={42}·active={true}·style={{...}}·onClick={fn}·icon={<Star />}).

2. 구조분해 — 실전 표준 패턴

매번 props.name·props.age 쓰면 지루하다. 함수 인자에서 바로 구조분해:

function Greeting({ name, age }) {
  return <h1>안녕, {name}님! (나이: {age})</h1>;
}

이게 2026 년 표준. 코드량 절반, 어떤 prop 을 쓰는지 함수 시그니처만 봐도 명확. 실전 코드 베이스의 90% 이상이 이 패턴.

기본값 — 구조분해 기본값 문법

prop 이 안 넘어왔을 때 사용할 기본값. JS 의 기본 인자 문법 그대로:

function Greeting({ name, age = 0, greeting = '안녕' }) {
  return <h1>{greeting}, {name}님! ({age}세)</h1>;
}
// <Greeting name="박준성" /> → "안녕, 박준성님! (0세)"

3. children — 특수한 prop

JSX 태그의 여는 태그와 닫는 태그 사이의 내용 이 자동으로 children 이라는 prop 으로 들어온다.

function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
}

// 사용
<Card title="공지">
  <p>이번 주 점검은 토요일 새벽 3시.</p>
  <a href="/notice">상세 보기</a>
</Card>

children 의 진짜 힘 — 레이아웃 wrapper 컴포넌트 만들기. Card·Modal·Layout·Section 등 "껍데기는 표준화하되 안은 자유" 인 경우. children 없이 React 짜기 거의 불가능.

4. TypeScript 로 props 타입 박기

JS 만 쓰면 잘못된 prop (오타·타입 실수) 이 런타임에야 발견. TypeScript 는 컴파일 타임에 잡는다. 2편에서 --template react-ts 로 만든 프로젝트면 바로 가능.

type GreetingProps = {
  name: string;
  age?: number;          // ? = 선택
  greeting?: string;
};

function Greeting({ name, age = 0, greeting = '안녕' }: GreetingProps) {
  return <h1>{greeting}, {name}님! ({age}세)</h1>;
}

// IDE 가 즉시 잡아줌
<Greeting name="박준성" age="42" /> // ❌ string 인데 number 자리

children 타입은 React.ReactNode — 텍스트·JSX·배열 모두 허용:

type CardProps = {
  title: string;
  children: React.ReactNode;
};
function Card({ title, children }: CardProps) { ... }

흔한 첫 실수 — props 안에서 값을 수정. props.name = '홍길동' 같은 코드. React 는 props 를 immutable 로 간주 — 부모가 다음 렌더에서 보낸 값이 덮어쓴다. props 가 마음에 안 들면 6편 useState 로 자체 상태로 변환해서 다루는 게 정공법.

입문 5편으로 React 기본기 끝. 6편부터는 state (useState) — 컴포넌트가 자체적으로 변하는 값을 가지는 법. 여기서부터 React 가 진짜 "동적" 인 도구로 보이기 시작.

React 교재 6편 — useState 로 컴포넌트에 상태 박기. setter 비동기성, 객체/배열 함정, 함수형 업데이트.