React 컴포넌트의 Props

이전 강의에서 여러 상품 인스턴스를 출력했습니다:

jsxfunction App() {
  return <div>
    <Product />
    <Product />
    <Product />
  </div>;
}

현재는 각 상품 태그 호출이 동일한 내용을 화면에 출력합니다. 이제 각 상품을 고유하게 만들어 보겠습니다.

예를 들어, 각 상품은 이름과 가격을 가져야 한다고 합시다. 각 상품 태그 호출이 우리가 원하는 마크업으로 형식이 지정된 자체 이름과 가격을 가진 상품을 출력하도록 만들어 봅시다.

이를 위해 몇 가지 단계를 거쳐야 합니다.

먼저, 상품 태그를 호출할 때 이 태그에 두 개의 속성을 작성할 것입니다: 상품 이름을 위한 <name 속성과 가격을 위한 <cost 속성입니다. 다음과 같이 작성합니다:

jsxfunction App() {
  return <div>
    <Product name="product1" cost="100" />
    <Product name="product2" cost="200" />
    <Product name="product3" cost="300" />
  </div>;
}

이러한 속성의 이름과 값은 객체 형태로 우리 컴포넌트 <Product의 생성자 함수 첫 번째 매개변수에 전달됩니다:

jsxfunction Product(props) {
  console.log(props); // name 및 cost 키를 가진 객체
  
  return <p>
    product
  </p>;
}

매개변수 이름은 무엇이든 될 수 있지만, React에서는 일반적으로 <props라고 부릅니다. 사실 이는 단순한 매개변수 이름이 아니라 React의 중요한 개념입니다.

이 개념의 핵심은 다음과 같습니다: 컴포넌트 태그를 호출할 때 이 태그에 데이터가 포함된 속성을 작성할 수 있습니다. 이 데이터는 컴포넌트의 <props로 전달됩니다. 그런 다음 컴포넌트는 이 데이터를 사용하여, 예를 들어 필요한 마크업을 생성할 수 있습니다.

이제 이를 구현해 보겠습니다:

jsxfunction Product(props) {
  return <p>
    name: <span>{props.name}</span>,
    cost: <span>{props.cost}</span>
  </p>;
}

<props 객체를 직접 사용하는 대신, 함수 매개변수에서 바로 props를 구조 분해하는 것이 더 편리하고 일반적으로 더 많이 사용됩니다:

jsxfunction Product({ name, cost }) {
  return <p>
    name: <span>{name}</span>,
    cost: <span>{cost}</span>
  </p>;
}