🌈 PropTypes

리액트 컴포넌트에 전달되는 Prop(속성)의 Type(타입)을 검사하는 방법에 대해 알아보자.

EmotionCard.propTypes = {
  // 전달 속성 객체, 속성 이름, 컴포넌트 이름
  emotion(props, propName, componentName) {
    // 체크할 유형
    const checkType = "string";
    // 전달 속성 유형
    const propType = typeof props[propName];

    // 전달 속성 검사 (문자 값인지 확인)
    if (propType !== checkType) {
      // 문자 값이 아닌 경우 오류 발생
      throw new Error(
        `${componentName} 컴포넌트에 전달 된 속성 ${propName}의 데이터 유형은 ${checkType}이 요구되나, 실제 전달된 속성 유형은 ${propType}이니 확인 바랍니다.`
      );
    }
  },
};

위와 같이 직접 custom propTypes를 통해 prop를 검사할 수 있지만 리액트 팀에서 제공하는 propTypes 패키지를 사용하면 편리하고 안정적으로 prop 검사를 할 수 있다.

패키지 사용

설치

npm i -D prop-types

사용 예시

import PropTypes from "prop-types";

// ...

Worker.propTypes = {
  name: PropTypes.string.isRequired,
  career: PropTypes.number,
  onCareerUp: PropTypes.func,
  isLeave: PropTypes.bool,
};

• isRequired 는 필수입력을 요구하는 속성을 표시한다.

propTypes 검사 항목

PropTypes﹕objectOf vs. shape

import { objectOf, number } from "prop-types";

const geoProps = {
  latitude: 37.331706,
  longitude: -122.030783,
};

ReactComponent.propTypes = {
  geoProps: objectOf(number),
};

• propTypes.objectOf 는 객체의 속성 값이 모두 동일한 타입을 설명할 경우 사용한다.

import { shape, arrayOf, string } from "prop-types";

const personProp = {
  name: "야무",
  job: ["강사", "디자이너", "개발자"],
};

ReactComponent.propTypes = {
  personProp: shape({
    name: string,
    job: arrayOf(string),
  }),
};

• 내가 객체 prop 타입 설정하고 싶다하면 shape를 사용한다.
• propTypes.shape 는 객체의 각 속성별 타입을 설명할 때 사용한다.
• 객체의 name 속성은 string, job 속성은 배열을 사용하였다.
• job의 배열에는 string으로만 구성된 배열이므로 arrayOf를 사용하였다.

객체의 속성이 정확히 동일하게 일치해야한다면 propTypes.exact()를 사용한다.

❗️ Null 타입 체크 주의

propTypes는 null 타입 체크를 할 수 없어 oneOf를 사용한다.

import { oneOf, oneOfType, shape, string } from "prop-types";

SignInedInfo.propTypes = {
  authUser: oneOfType([
    oneOf([null]), // ← 이렇게 작성합니다.
    shape({
      displayName: string.isRequired,
      photoURL: string.isRequired,
    }),
  ]).isRequired,
};

• PropTypes.oneOf([’grow’, ‘learn’, ‘connect’]) 이 중 하나만 파라미터로 들어올 수 있다.

🔥 defaultProps와 같이 사용하기

함수에 기본값을 주듯이 props에 기본값을 주는 것을 리액트에서는 지양한다. 그러므로 다음과 같이 기본값을 줘야한다.

import React from 'react';
import { number, bool}

const Worker = ({ name, career, onCareerUp, isLeave }) => (
  // ...
);

// Worker 컴포넌트 전달 속성 기본 값 설정
Worker.defaultProps = {
  career: 0,
  isLeave: true,
}

Worker.propTypes = {
  career:number,
  isLeave: bool
}

export { Worker };

• boolean 대신 bool이라고 사용합니다.