JSON을 React PropTypes로 변환 — Numio

JSON으로 된 샘플 props 객체를 React propTypes 객체로 바꿉니다. 중첩 객체는 PropTypes.shape, 문자열 배열은 PropTypes.arrayOf(PropTypes.string), null 값은 PropTypes.any가 됩니다.

JavaScript React 컴포넌트가 받는 데이터 샘플로 런타임 prop 검사를 추가합니다.

JSON

PropTypes

이럴 때 사용하세요

JavaScript React 컴포넌트가 받는 데이터 샘플로 런타임 prop 검사를 추가합니다.
알려진 예시 데이터로 레거시 클래스 컴포넌트의 props를 문서화합니다.

사용 방법

예시 props의 JSON 객체를 붙여 넣습니다. 루트가 객체 배열이면 먼저 하나의 객체로 병합됩니다.
const propTypes = {...} 블록을 확인합니다. 중첩 객체는 PropTypes.shape({...})로 나타납니다.
복사한 뒤 import PropTypes from "prop-types"를 추가하고 MyComponent.propTypes에 할당하며, 필요한 곳에 .isRequired를 붙이세요.

JSON props

{
  "title": "Release notes",
  "count": 3,
  "visible": true,
  "tags": ["web", "react"],
  "author": { "name": "Ada", "avatarUrl": "https://example.com/a.png" },
  "links": [
    { "label": "Docs" },
    { "label": "Repo", "url": "https://example.com/repo" }
  ],
  "badge": null
}

React PropTypes

const propTypes = {
  title: PropTypes.string,
  count: PropTypes.number,
  visible: PropTypes.bool,
  tags: PropTypes.arrayOf(PropTypes.string),
  author: PropTypes.shape({
    name: PropTypes.string,
    avatarUrl: PropTypes.string,
  }),
  links: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string,
      url: PropTypes.string,
    }),
  ),
  badge: PropTypes.any,
}

세부 정보 및 제한 사항

사이트 자체 생성기가 브라우저 Web Worker에서 실행된 뒤 Prettier로 정리합니다. 서버 요청은 없습니다.

.isRequired가 붙는 prop은 없으며, 함수, 엘리먼트, enum은 JSON에서 추론할 수 없습니다.

객체 배열은 모든 항목이 하나의 PropTypes.shape로 병합되므로 뒤쪽 항목에만 있는 키도 포함됩니다.

타입이 섞인 배열은 PropTypes.arrayOf(PropTypes.oneOfType([...])), 중첩 배열은 arrayOf(arrayOf(...)), 빈 배열은 PropTypes.array가 됩니다.

FAQ

JSON 배열을 붙여 넣을 수 있나요?

객체를 담은 배열이라면 가능합니다. 항목이 하나의 객체로 병합되어 어느 항목에든 있는 키가 모두 결과에 나열됩니다. 루트가 문자열이나 숫자 배열이면 거부됩니다.

null 값은 어떤 타입이 되나요?

PropTypes.any가 됩니다. null로는 실제 타입을 알 수 없기 때문입니다. PropTypes.string처럼 예상되는 검사기로 바꾸세요.

React 19에서도 PropTypes가 동작하나요?

아니요. React 19에서 propTypes 검사가 제거되어 정의가 조용히 무시됩니다. 이 출력은 React 18 이하에서 사용하거나 TypeScript 타입으로 전환하세요.

사양 및 참고 자료

prop-types on GitHub