Passing Props to a Component

React 컴포넌트들은 props를 사용하여 서로 통신한다. 부모 컴포넌트가 props로 자식 컴포넌트에게 정보를 전달할 수 있다.

 

 

컴포넌트에 props 전달

다음과 같은 코드에서는 부모 컴포넌트인 Profile이 자식 컴포넌트인 Avatar에게 props를 전달하지 않는다.

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

만약 Avatar에게 부모 컴포넌트인 Profile의 어떤 정보를 넘겨주고 싶다면 다음과 같이 전달해줄 수 있다.

 

 

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

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

Avatar에게 person이라는 prop으로 객체와 size라는 prop으로 100을 전달해주었다.

 

 

2단계: 자식 컴포넌트 내부의 props 읽기

자식 컴포넌트인 Avatar에서 부모 컴포넌트가 전달해준 person과 size의 값을 다음과 같이 읽어들여서 사용할 수 있다.

function Avatar({ person, size }) {
  // person and size are available here
}

이 때, 부모 컴포넌트에서 지정한 props의 이름을 그대로 써주어야 매핑이 되어 그 prop을 가져다 쓸 수 있다.

 

 

 

 

props는 컴포넌트에 대한 유일한 인자이다. 그리고 props는 객체이다. 그렇기 때문에 위 코드에서도 인자에 {person, size}와 같이 객체로 받아온 것이다. 만약 props가 너무 많거나, 다른 변수에 값을 넣어서 사용하고 싶다면 다음과 같이도 사용할 수 있다.

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

 

 

위의 예시가 가능한 이유는, 말했듯이 props가 객체이기 때문이다. 우리는 객체에서 어떤 key에 대한 value 값에 접근할 때 obj.key1 과 같은 식으로 접근한다. 부모 컴포넌트인 Profile에서 person과 size를 한 객체인 props에 key와 value 쌍으로 넣어서 자식 컴포넌트에서 객체에서 key에 대한 value 값을 얻는 방식인 것이다.

 

 

props의 기본값 지정

부모 컴포넌트에서 값을 지정하지 않았지만 자식 컴포넌트에서 기본값으로 필요하다면 다음과 같이 선언하여 사용할 수 있다.

function Avatar({ person, size = 100 }) {
  // ...
}

 

 

위와 같은 size prop은 부모 컴포넌트에서 size prop을 지정해주지 않았거나, size={undefined}로 전달해주었다면 사용한 기본값이다. 만약 부모 컴포넌트에서 size={null}이나 size={0} 으로 넘겨주었다면 falsy한 값임에도 불구하고 하나의 값으로 쳐서 기본값이 사용되지 않는다.

 

 

JSX 전개 구문으로 prop 전달

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

 

 

위의 코드에서 Profile의 모든 props를 똑같이 자식 컴포넌트인 Avatar에 모두 전달한다. 이러한 경우에는 간결하게 전개구문을 이용해서 전달할 수 있다.

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}