React의 소품 검증

1. React의 Prop은 무엇인가요?

props("properties"의 약자)는 한 구성 요소에서 다른 구성 요소로, 일반적으로 상위 구성 요소에서 하위 구성 요소로 데이터 및 이벤트 핸들러를 전달하는 메커니즘입니다.

상위 구성요소

import React from 'react';

const App = () => {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
};

export default App;

props를 받는 하위 컴포넌트

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

2. Prop을 검증하는 이유는 무엇입니까?

prop의 유효성을 검사하면 구성 요소가 올바른 유형의 데이터를 수신하고 필요한 prop이 제공되는지 확인됩니다. 이는 다음을 수행하는 데 도움이 됩니다.

• 버그를 예방하세요.

• 구성요소를 더욱 예측 가능하게 만듭니다

예를 들어 구성 요소가 문자열을 기대했지만 숫자를 받으면 예기치 않은 동작이 발생할 수 있습니다.

3. 유효성 검사를 위해 PropTypes 사용

React는 prop 유효성 검사를 시행할 수 있는 prop-types라는 패키지를 제공합니다. 구성 요소에 전달된 props가 예상 유형과 일치하지 않으면 React는 콘솔에 경고를 기록합니다.

4. prop-types 패키지 설치

새 React 프로젝트에서 작업하는 경우 먼저 prop-types 패키지를 설치해야 할 수도 있습니다.

npm install prop-types

5. 구성 요소에서 PropType 정의

구성 요소에 propTypes 개체를 추가하여 소품 유형을 정의할 수 있습니다.

import PropTypes from 'prop-types';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

여기: "name" prop의 유효성을 검사하기 위해 PropTypes 추가
"이름"이 필수 문자열일 것으로 예상됩니다

6. 일반적인 PropTypes

적용할 수 있는 몇 가지 일반적인 소품 검증 유형은 다음과 같습니다.

1. 기본 유형:

• PropTypes.string - prop이 문자열인지 확인합니다.
• PropTypes.number - Prop이 숫자인지 확인합니다.
• PropTypes.bool - prop이 부울인지 확인합니다.
• PropTypes.func - prop이 함수인지 확인합니다.
• PropTypes.object - 소품이 객체인지 확인합니다.
• PropTypes.array - 소품이 배열인지 확인합니다.
• PropTypes.node - prop이 렌더링 가능한 콘텐츠(숫자, 문자열, 요소,
)인지 확인합니다.

2. 필수 Props: Prop이 전달되도록 하려면 .isRequired를 사용하세요.

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

3. 특정 유형의 배열: 배열의 내용이 특정 유형인지 확인하기 위해 배열을 검증할 수 있습니다.

MyComponent.propTypes = {
  items: PropTypes.arrayOf(PropTypes.string).isRequired, // Array of strings
};

4. 특정 모양의 물체:

MyComponent.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  }).isRequired,
};

5. 값 집합 중 하나: prop이 지정된 여러 값 중 하나가 되도록 강제할 수 있습니다.

MyComponent.propTypes = {
  status: PropTypes.oneOf(['success', 'error', 'loading']).isRequired,
};

6. 사용자 정의 Prop 검증: 자신만의 사용자 정의 검증 로직을 생성할 수 있습니다:

MyComponent.propTypes = {
  age: function (props, propName, componentName) {
    if (props[propName] < 18) {
      return new Error(
        `${propName} in ${componentName} must be at least 18 years old`
      );
    }
  },
};

7. Prop 검증의 예

여러 유형의 소품을 예상하는 구성 요소를 만들고 이를 검증해 보겠습니다.

import React from 'react';

const App = () => {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
};

export default App;

8. 기본 소품

prop가 제공되지 않는 경우 defaultProps를 사용하여 기본 prop을 정의할 수도 있습니다.

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

9. 잘못된 Prop 유형 처리

prop 유형이 올바르지 않으면 React는 브라우저 콘솔에 경고를 기록하지만 애플리케이션은 계속 작동합니다. PropTypes는 개발 모드에서만 실행된다는 점에 유의하는 것이 중요합니다(즉, 프로덕션 빌드에서는 실행되지 않습니다).

위 내용은 React의 소품 검증의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!