컴포넌트에 props 전달하기

React 컴포넌트는 props를 이용해 서로 통신합니다. 모든 부모 컴포넌트는 props를 줌으로써 몇몇의 정보를 자식 컴포넌트에게 전달할 수 있습니다. props는 HTML 어트리뷰트를 생각나게 할 수도 있지만, 객체, 배열, 함수를 포함한 모든 JavaScript 값을 전달할 수 있습니다.

학습 내용

컴포넌트에 props를 전달하는 방법
컴포넌트에서 props를 읽는 방법
props의 기본값을 지정하는 방법
컴포넌트에 JSX를 전달하는 방법
시간에 따라 props가 변하는 방식

친숙한 props

props는 JSX 태그에 전달하는 정보입니다. 예를 들어, className, src, alt, width, height는 <img> 태그에 전달할 수 있습니다.

포크

function Avatar() {
  return (
    <img
      className="avatar"
      src="https://react.dev/images/docs/scientists/1bX5QH6.jpg"
      alt="Lin Lanying"
      width={100}
      height={100}
    />
  );
}

export default function Profile() {
  return (
    <Avatar />
  );
}

<img> 태그에 전달할 수 있는 props는 미리 정의되어 있습니다. (ReactDOM은 HTML 표준을 준수합니다.) 자신이 생성한 <Avatar>와 같은 어떤 컴포넌트든 props를 전달할 수 있습니다. 방법은 다음과 같습니다.

컴포넌트에 props 전달하기

아래 코드에서 Profile 컴포넌트는 자식 컴포넌트인 Avatar에 어떠한 props도 전달하지 않습니다.

export default function Profile() {
  return (
    <Avatar />
  );
}

다음 두 단계에 걸쳐 Avatar에 props를 전달할 수 있습니다.

1단계: 자식 컴포넌트에 props 전달하기

먼저, Avatar에 몇몇 props를 전달합니다. 예를 들어 person (객체)와 size (숫자)를 전달해 보겠습니다.

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

중요합니다!

person= 뒤에 있는 이중 괄호가 혼란스럽다면, JSX 중괄호 안의 객체라고 기억하시면 됩니다.

이제