React의 모양이 있는 Proptype 배열

1. React의 PropTypes 모양
2. 결론

React에서의 코딩은 앱을 배포하고 오류와 버그로 ​​인해 앱이 실패할 때까지 즐거운 연습입니다.

고맙게도 우리는 우리를 구제해줄 React의 proptype 의존성을 가지고 있습니다. React의 Props는 속성의 줄임말이며 React에는 숫자, 문자열, Boolean, 객체 등 다양한 props가 있습니다.

proptype이 하는 일은 코드에서 전달하는 소품 유형을 확인하여 올바른지 확인하는 것입니다. 잘못된 것을 전달하면 proptype은 브라우저의 콘솔을 통해 경고합니다.

React의 PropTypes 모양

PropTypes.Shape()는 더 깊은 수준의 유형 검사 및 유효성 검사를 제공합니다. 잘못된 소품에 대한 배열의 내부 구조를 검색합니다.

이 기능을 사용하려면 npm i prop-types를 입력하여 작업 중인 프로젝트 폴더에 설치해야 합니다. 설치가 완료되면 코딩 부분으로 이동합니다.

작동 중인 PropTypes.shape()를 보여주는 예를 살펴보겠습니다.

src 폴더 내에서 새 파일을 만들고 이름을 Component.js로 지정하고 파일로 이동하여 아래와 같이 proptypes를 가져옵니다.

코드 조각 - Component.js:

import PropTypes from 'prop-types'

function Component() {
  return null
}

Component.propTypes = {
  person: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  })
}

export default Component;

proptypes가 App.js에서 렌더링하려는 날짜의 문자열 및 숫자 소품을 확인하기를 원하므로 name 및 age 구성 요소를 PropTypes.shape 안에 래핑합니다.

다음으로 App.js 파일로 이동하여 아래와 같이 Component.js 파일을 가져옵니다.

코드 조각 - App.js:

import Component from './Component'

function App() {
  return < Component person = {
    {
      name: 'Kyle', age: '26'
    }
  } />
}

export default App

출력:

브라우저의 콘솔을 열면 age prop이 숫자 대신 문자열로 전달되기 때문에 첨부된 스크린샷에 오류가 표시됩니다. 이 이상 현상이 수정되면 오류 로그가 사라집니다.

이것이 proptype 의존성을 활용하는 것의 굉장함입니다.

결론

PropTypes의 효과는 그 자리에서 오류 및 버그를 감지하는 데 탁월하기 때문에 과대평가될 수 없습니다. 보다 정확하고 구조화된 코드를 작성하는 데 도움이 됩니다.