Props — 부모가 자식에게 전달하는 데이터

Props란 무엇인가

Props(Properties)는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터입니다. 함수의 매개변수처럼 동작하며, 자식 컴포넌트는 props를 읽어 UI를 구성합니다.

// 부모 컴포넌트
function App() {
  return <UserCard name="홍길동" age={30} isAdmin={true} />;
}

// 자식 컴포넌트
function UserCard({ name, age, isAdmin }) {
  return (
    <div>
      <p>{name} ({age}세)</p>
      {isAdmin && <span>관리자</span>}
    </div>
  );
}

Props로는 문자열, 숫자, 불리언, 배열, 객체, 함수 등 모든 JavaScript 값을 전달할 수 있습니다.

읽기 전용 특성

Props는 읽기 전용입니다. 자식 컴포넌트가 전달받은 props를 직접 수정하는 것은 React의 규칙 위반입니다.

function BadComponent({ count }) {
  // 금지: props를 직접 수정
  count = count + 1;
  return <p>{count}</p>;
}

function GoodComponent({ count }) {
  // 올바른 방법: 새로운 값으로 계산
  const displayCount = count + 1;
  return <p>{displayCount}</p>;
}

props를 읽기 전용으로 강제하는 이유는 컴포넌트를 순수 함수처럼 만들기 위해서입니다. 같은 props를 주면 항상 같은 UI가 나와야 예측 가능하고 테스트하기 쉬운 컴포넌트가 됩니다.

단방향 데이터 흐름

React는 데이터가 항상 부모에서 자식 방향으로만 흐르는 단방향 데이터 흐름(Unidirectional Data Flow)을 따릅니다.

     ┌─────────┐
     │   App   │  <-- 데이터 소유
     └────┬────┘
          │ props
     ┌────▼────┐
     │  List   │
     └────┬────┘
          │ props
     ┌────▼────┐
     │  Item   │  <-- 데이터 소비
     └─────────┘

자식이 부모의 상태를 바꾸고 싶을 때는 부모가 콜백 함수를 props로 내려주고, 자식이 그 함수를 호출하는 방식을 사용합니다.

function App() {
  const [count, setCount] = React.useState(0);

  // 자식이 호출할 콜백을 props로 전달
  return <Counter count={count} onIncrement={() => setCount(count + 1)} />;
}

function Counter({ count, onIncrement }) {
  return (
    <div>
      <p>{count}</p>
      <button onClick={onIncrement}>증가</button>
    </div>
  );
}

단방향 흐름의 장점은 데이터의 변경 경로가 명확하다는 것입니다. 버그가 발생했을 때 "이 데이터를 바꾼 것은 누구인가"를 위에서 아래로 추적할 수 있습니다.

컴포넌트 합성과 Props

children prop은 특별한 props로, 컴포넌트 태그 사이에 넣은 내용이 자동으로 전달됩니다.

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

// 사용
<Panel title="공지사항">
  <p>내용이 여기에 들어갑니다.</p>
  <button>확인</button>
</Panel>

이 패턴을 활용하면 레이아웃 컴포넌트, 모달, 카드 등 컨테이너 역할의 컴포넌트를 유연하게 만들 수 있습니다.

기본값 설정

props가 전달되지 않았을 때의 기본값은 JavaScript 기본 매개변수 문법으로 설정합니다.

function Button({ label = '확인', variant = 'primary', disabled = false }) {
  return (
    <button className={`btn btn-${variant}`} disabled={disabled}>
      {label}
    </button>
  );
}

// label, variant, disabled 모두 기본값 사용
<Button />

// label만 지정
<Button label="취소" />

정리

Props는 부모에서 자식으로 데이터를 전달하는 유일한 공식 경로입니다. 읽기 전용이라는 제약과 단방향 흐름이라는 규칙이 함께 작동하여 데이터 변경의 원인을 추적하기 쉬운 구조를 만듭니다. 자식이 부모 상태를 변경해야 할 때는 콜백 함수를 props로 받는 패턴을 사용합니다.