Props — 컴포넌트끼리 데이터를 주고받는 방법

컴포넌트를 여러 개 만들었다고 합시다. 그런데 각각의 컴포넌트가 서로 다른 데이터를 보여줘야 한다면, 그 데이터는 어떻게 전달할까요?

여기서 등장하는 게 Props입니다.

Props란

Props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터입니다.

택배로 비유하면 이해가 쉽습니다. 부모 컴포넌트가 택배 상자에 데이터를 담아서 자식 컴포넌트에게 보내는 겁니다. 자식은 그 상자를 열어서 안에 든 데이터를 꺼내 쓰기만 하면 됩니다.

HTML에서 태그에 속성을 넣어본 적 있을 겁니다.

<img src="/photo.jpg" alt="사진" />

Props도 이것과 거의 똑같습니다.

// 부모 컴포넌트에서 자식에게 데이터를 전달합니다
<UserCard name="민수" age={25} />

자식 컴포넌트는 이렇게 받습니다.

function UserCard(props) {
  return (
    <div>
      <p>{props.name}</p>
      <p>{props.age}살</p>
    </div>
  );
}

실무에서는 구조 분해 할당으로 더 깔끔하게 쓰는 경우가 많습니다.

function UserCard({ name, age }) {
  return (
    <div>
      <p>{name}</p>
      <p>{age}살</p>
    </div>
  );
}

중괄호 안에 받고 싶은 값의 이름을 넣으면, props.name 대신 바로 name으로 쓸 수 있습니다.

여기서 중요한 규칙이 하나 있습니다. 자식 컴포넌트는 받은 Props를 직접 수정할 수 없습니다.

택배 비유로 다시 설명하면, 택배를 받은 사람이 상자 안의 물건을 바꿔서 보낸 사람한테 되돌려 보낼 수는 없습니다. 받은 건 받은 대로 쓰는 겁니다.

function UserCard({ name }) {
  name = "다른이름"; // 이렇게 하면 안 됩니다
  return <p>{name}</p>;
}

데이터가 위에서 아래로만 흐르기 때문입니다.

자식이 마음대로 데이터를 바꿀 수 있으면, 어디서 데이터가 변경됐는지 추적하기가 어려워집니다. 컴포넌트가 10개, 20개로 늘어나면 혼란이 걷잡을 수 없게 됩니다.

React는 이 규칙 덕분에 데이터 흐름이 예측 가능합니다. 문제가 생기면 부모 쪽을 확인하면 됩니다. 디버깅이 훨씬 쉬워집니다.

퍼블리셔 입장에서 Props가 낯설게 느껴질 수 있는데, 사실 이미 비슷한 걸 해왔습니다.

<a href="/about" target="_blank">소개</a>

href와 target이 <a> 태그에 전달하는 속성인 것처럼, Props는 컴포넌트에 전달하는 속성입니다. 개념은 같고 대상만 다릅니다. HTML 태그 대신 내가 만든 컴포넌트에 속성을 넘긴다고 생각하면 됩니다.

이 규칙만 기억하면 Props는 어렵지 않습니다. 다음 글에서는 컴포넌트 안에 또 다른 컴포넌트를 넣는 방법을 알아보겠습니다.