Props — 컴포넌트에 데이터 전달하기

이 토픽을 마치면

props의 동작 원리, children의 역할, 그리고 prop drilling이 무엇인지 이해하게 됩니다.

Props란

HTML 태그에 속성을 넣듯이, React 컴포넌트에도 데이터를 넣을 수 있습니다:

jsx

<UserCard name="Alice" age={25} />

이 name과 age가 **props(properties)**입니다. 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법입니다.

받는 쪽

jsx

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

구조 분해로 필요한 props만 꺼내 씁니다. props 객체를 통째로 받을 수도 있습니다:

jsx

function UserCard(props) {
  return <h2>{props.name}</h2>;
}

Props는 읽기 전용입니다

jsx

function UserCard({ name }) {
  name = "Bob"; // 동작하지만, 하면 안 됩니다
  return <h2>{name}</h2>;
}

React에서 props는 읽기 전용으로 취급해야 합니다. 부모가 준 데이터를 자식이 마음대로 바꾸면 데이터 흐름이 엉킵니다.

값을 바꾸고 싶으면 부모에서 상태를 관리하고, 변경 함수를 props로 내려줍니다:

jsx

function Parent() {
  const [name, setName] = useState("Alice");
  return <Child name={name} onNameChange={setName} />;
}

function Child({ name, onNameChange }) {
  return <input value={name} onChange={e => onNameChange(e.target.value)} />;
}

기본값

props가 전달되지 않았을 때의 기본값을 설정할 수 있습니다:

jsx

function Button({ label = "Click", size = "medium" }) {
  return <button className={size}>{label}</button>;
}

<Button />              // label="Click", size="medium"
<Button label="Save" /> // label="Save", size="medium"

children — 특별한 prop

태그 사이에 넣은 내용은 children prop으로 전달됩니다:

jsx

function Card({ children }) {
  return <div className="card">{children}</div>;
}

<Card>
  <h2>Title</h2>
  <p>Content</p>
</Card>

레이아웃 컴포넌트를 만들 때 유용합니다. 감싸는 구조를 재사용하면서 안의 내용만 바꿀 수 있습니다.

Prop Drilling

jsx

<App>          → user
  <Layout>     → user
    <Sidebar>  → user
      <Avatar> → user.name 여기서만 씀

데이터가 중간 컴포넌트를 거쳐 전달되는 걸 prop drilling이라고 합니다. 중간 컴포넌트(Layout, Sidebar)는 user를 쓰지 않는데도 넘겨야 합니다.

2~3단계까지는 괜찮지만, 그 이상 깊어지면 Context나 상태 관리 라이브러리를 고려합니다.

핵심

Props는 부모가 자식에게 데이터를 전달하는 방법이며 읽기 전용입니다. children은 태그 사이의 내용을 전달하는 특별한 prop입니다. 데이터 전달이 깊어지면 prop drilling 문제가 발생합니다.