컴포넌트에 props 전달하기

컴포넌트에 props 전달하기

컴포넌트끼리 데이터를 주고받는 가장 기본적인 경로가 바로 props예요. 부모 컴포넌트는 자식 컴포넌트에게 props를 통해 값을 내려줄 수 있고, HTML 속성과 비슷해 보이지만 사실 객체·배열·함수 같은 자바스크립트 값이면 뭐든 담을 수 있어요. props를 이해하면 컴포넌트를 떼어놓고 생각할 수 있게 돼요.

출처: React 공식 문서 — Passing Props to a Component

props를 전달하는 두 단계

Profile 컴포넌트가 자식 Avatar에게 값을 건네고 싶다면 두 단계로 나눠서 생각하면 돼요.

1단계 — 자식에게 props를 넘긴다. JSX 태그에 속성처럼 값을 적으면 돼요. 아래는 person(객체)과 size(숫자) 두 개를 넘기는 예시예요.

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

2단계 — 자식에서 props를 읽는다. 함수 선언부의 ({ ... }) 안에 받고 싶은 이름을 쉼표로 나열해 구조 분해하면, 그 값들을 일반 변수처럼 쓸 수 있어요. 여기서 괄호 짝을 빠뜨리기 쉬우니 주의하세요.

function Avatar({ person, size }) {
  // person 과 size 를 변수처럼 사용
}

사실 props는 컴포넌트 함수가 받는 유일한 인자예요. function Avatar(props)처럼 통째로 받아서 props.person으로 꺼낼 수도 있지만, 대개는 필요한 것만 구조 분해해 쓰는 게 편해요. 부모가 person이나 size를 어떻게 바꾸든 자식 입장에서는 받은 값을 그저 보여줄 뿐이라, 두 컴포넌트를 서로 독립적으로 설계할 수 있어요.

JSX를 children으로 전달하기

JSX 태그 사이에 내용을 넣으면 그 내용이 children이라는 prop으로 전달돼요. 아래 Card처럼 감싸는 틀 역할을 하는 컴포넌트에 딱 맞는 방식이에요.

<Card>
  <Avatar />
</Card>

부모는 <Card> 안에 어떤 JSX든 채워 넣을 수 있어서, Card는 '빈 구멍'을 가진 틀이라고 생각하면 돼요. 패널이나 그리드처럼 화면을 감싸는 시각적 래퍼를 만들 때 자주 쓰여요.

props는 바꿀 수 없어요

props는 한 번 받으면 그 값이 고정돼요. 사용자가 색을 바꿔야 한다든가 새 데이터가 들어와서 값을 바꿔야 한다면, props를 직접 수정하지 말고 부모에게 다른 props를 내려달라고 요청해야 해요. 이렇게 'props는 읽기 전용'이라는 규칙 덕분에 컴포넌트의 입력과 출력이 예측 가능해져요. 화면을 바꿔야 할 때는 props 대신 state를 설정하는데, 그 내용은 다음 단계에서 다뤄요.

더 알아보기