[React] defaultProps와 PropTypes를 이용한 props의 기본값 설정과 타입 체크

defaultProps: props의 기본값 설정

defaultProps를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 해당 속성을 지정하지 않았을 때, 지정할 기본값을 설정할 수 있다.

import React from "react";
import PropTypes from "prop-types";

const Test = ({ name }) => {
  return <div>{name}</div>;
};

Test.defaultProps = {
  name: "Oliver",
};

export default Test;

propTypes의 타입 확인은 defaultProps에도 적용되게 하기 위하여 defaultProps가 처리된 뒤에 일어난다.

propTypes: props의 타입 체크

PropTypes는 React에서 타입 체크를 위해서 사용되는 라이브러리로, prop의 타입을 정의할 수 있다.
prop에 유효하지 않은 값이 전달 되면, 콜솔창에 경고문이 나타난다. propTypes는 성능상의 이유로 개발 모드(Development mode) 에서만 유효하고, 실제 사용자에게는 아무런 영향을 주지 않는다.

import React from "react";
import PropTypes from "prop-types";

const Test = ({ name }) => {
  return <div>{name}</div>;
};

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

export default Test;

isRequired

types뒤에 isRequired 를 붙여주면 필수 prop으로 인식하고, 값이 없는 경우에도 콘솔창에 에러가 발생한다.

validators 예시

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  
  // ES6 Symbol
  optionalSymbol: PropTypes.symbol,

  // 렌더링할 수 있는 모든 것(number, string, JSX code, ...)
  optionalNode: PropTypes.node,

  // React 엘리먼트
  optionalElement: PropTypes.element,

  // React 엘리먼트 타입 (ie. MyComponent)
  optionalElementType: PropTypes.elementType,

  // prop가 클래스의 인스턴스임을 선언할 수 있습니다.
  // JavaScript의 instanceof 연산자를 사용합니다.
  optionalMessage: PropTypes.instanceOf(Message),

  // 열거형(enum)으로 처리하여 prop가 특정 값들로 제한되도록 할 수 있습니다.
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  // 여러 종류중 하나의 종류가 될 수 있는 객체
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // 특정 타입의 행렬
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // 객체의 모든 키 값이 주어진 PropType인 객체
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  // 특정 형태를 갖는 객체
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),

  // An object with warnings on extra properties
  optionalObjectWithStrictShape: PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  }),

  // 모든 데이터 타입이 가능
  requiredAny: PropTypes.any,
};

클래스형 컴포넌트에서의 사용법

클래스형 컴포넌트에서 props를 사용할 때는 render 함수에서 this.props를 사용하면 되고, defaultProps과 propTypes는 함수형 컴포넌트와 동일한 방식으로 사용할 수 있다.

import React, { Component } from "react";
import PropTypes from "prop-types";

class Test extends Component {
  render() {
    const { name } = this.props;
    return <div>{name}</div>;
  }
}

Test.defaultProps = {
  name: "Oliver",
};

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

export default Test;

다음과 같이 ES6 문법인 static 키워드를 사용하여 클래스의 정적 메서드로 정의할 수도 있으며, 이는 static 키워드를 사용하지 않는 방식과 동일하게 동작한다.

import React, { Component } from "react";
import PropTypes from "prop-types";

class Test extends Component {
  static defaultProps = {
    name: "Oliver",
  };
  static propTypes = {
    name: PropTypes.string.isRequired,
  };
  render() {
    const { name } = this.props;
    return <div>{name}</div>;
  }
}

export default Test;

[참고]

https://github.com/facebook/prop-types