React : PropTypes

✅ 운영체제 : Windows 11

---

PropTypes

❄️ 참고자료
React 공식문서 PropTypes와 함께 하는 타입 검사
NPMJS props-types (원문)
DaleSeo PropTypes로 React 입력 타입 체크하기
jistol (React) PropTypes 사용방법과 종류

React props와 비슷한 object의 type을 검사할 수 있는 라이브러리이다.

특정 애플리케이션에서는 전체 애플리케이션의 타입 검사를 위해 Flow 또는 TypeScript와 같은 JS 도구를 사용할 수 있지만 React에도 검사 기능이 존재한다.

React의 내장된 props-types를 선언하여 컴포넌트의 props 타입을 검사한다.

프로퍼티 선언 방법

import PropTypes from 'prop-types';

☃️ 예시 코드
노마드 코더 ReactJS로 영화 웹 서비스 만들기 : #7.4 Movie App part Two에서 나오는 코드를 가져와보았다.

❄️ 참고자료
노마드 코더 ReactJS로 영화 웹 서비스 만들기

// 타입 검사를 위해 PropTypes를 import 한다.
import PropTypes from "prop-types"

// 함수 작성
function Movie({ coverImg, title, summary, genres }) {
  return (
    <div>
      <img src={coverImg} alt={title} />
      <h2>{title}</h2>
      <p>{summary}</p>
      <ul>
        {genres.map((g) => (
          <li key={g}>{g}</li>
        ))}
      </ul>
    </div>
  );
}

// 자식 컴포넌트는 부모 컴포넌트에게 받은 props의 타입을 검사한다.
Movie.prototype = {
  // string : 문자열 검사
  // isRequired : 필수포함 (prop가 없으면 경고창 표시)
  coverImg: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  
  // arrayOf : 문자열 검사
  genres: PropTypes.arrayOf(PropTypes.string)
}

export default Movie

PropTypes의 종류

☃️ 타입 정의

// 배열
PropTypes.array

// boolean : true, false
PropTypes.bool

// 함수
PropTypes.func

// 숫자
PropTypes.number

// 객체
PropTypes.object

// 문자열
PropTypes.string

// 심벌 개체 (SE6)
PropTypes.symbol

// 렌더링 될 수 있는 모든 것
// number, string, element 또는 그것들이 포함된 array / fragment
PropTypes.node

// React element
PropTypes.element

// React element type
PropTypes.elementType

// 심벌 개체 (SE6)
PropTypes.symbol

☃️ 복잡한 타입 정의

// JS에서 instanceOd로 정의 가능한 클래스 인스턴스
// 즉, propr가 클래스의 인스턴스임을 선언할 수 있다.
PropTypes.instanceOf(prop)

// 열거형(Enum)으로 처리하여 prop가 특정 값들로 제한되도록 설정
// 즉, 포함된 값들 중 하나 ▶ black과 white중 하나의 값이 될 수 있는 Enum 타입
PropTypes.oneOf(['black', 'white'])

// 해당 PropTypes으로 구성된 배열
// 즉, 포함된 PropTypes들중 하나
PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
    ])
    
// 특정 타입의 행렬
// 즉, 해당 PropType으로 구성된 배열
PropTypes.arrayOf(PropTypes.number)

// 특정 타입의 프로퍼티 값들을 갖는 객체
// 즉, 주어진 종류의 값을 가진 객체
PropTypes.objectOf(PropTypes.number),

// 특정 형태를 갖는 객체
// 즉, 해당 스키마를 가진 객체
 optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  })
  
// 추가 프로퍼티에 대한 경고가 있는 객체
// 즉, 명확하게 해당 스키마만 존재해야함!!
PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  })

---

🍎 수정 및 추가

🗓️ 2022.02.21

• 썸네일 사진 변경