"Props"는 React의 특수 키워드입니다. 소품은 구성 요소에 데이터를 전달하는 데 사용됩니다.

구성 요소에서 변수와 같은 prop을 사용하는 동안 구성 요소에 props 개체를 사용할 수 있습니다.

Prop은 JavaScript 객체이며 prop 내부에는 prop 이름과 변수가 있습니다.

소품 때문에 구성 요소 간에 값을 전송할 수 있습니다.

성분 1:

import react from 'react';
import Users from './Users';

function Counter() {
  return(
    <>
      <Users name="Fatma" />
    </>
  );
}
export default Counter;

function Users(props) {
  return (
    <>
    {props.name}
    </>
  );
}
export default Users;

매번 소품을 쓰는 대신 구성 요소 내부에 속성을 쓸 수 있습니다.
이와 같이;

function Users({name, age}) {
  return (
    <>
    <h1>{name} {age}</h1>
    </>
  );
}

export default Users;

이것의 목적; 모든 나열 프로세스 등 키 소품은 우수한 성능으로 루프에서 반환하는 표현식을 나열하는 데 사용됩니다. 가장 바깥쪽 요소에는 key prop을 지정할 수 있습니다.

소품 유형

먼저 PropTypes로 가져와야 합니다.

정의한 속성에 유형을 보낼 때 구성 요소 외부에서 유형을 정의합니다.

import PropTypes from "prop-types";

function Users({name, age, answer}) {
  return (
    <>
    <h1>{name} {age}</h1>
    </>
  );
}

Users.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  answer: PropTypes.bool,
};

export default Users;

props 유형을 지정한 후 옆에 isRequired를 작성하면 해당 필드를 비워둘 수 없습니다.

유형을 지정한 속성 옆에 isRequired를 작성합니다.

name: PropTypes.string.isRequired,

속성에 대해 둘 이상의 데이터 유형을 입력하려는 경우 OneOfType을 사용합니다.

age: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

개체 유형 데이터가 입력되면 모양을 사용하여 개체의 하위 요소에 대한 유형을 정의합니다.

address: PropTypes.shape({title : PropTypes.string, zipCode: PropTypes.number,}),

유형이 지정되지 않은 소품에 기본값을 제공할 수 있습니다. 다른 유형을 제외하고 정의해야 합니다.

Users.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  answer: PropTypes.bool,
  address: PropTypes.shape({title : PropTypes.string, zipCode: PropTypes.number,}),
};

Users.defaultProps = {
  answer: false,
}