[React] PropTypes로 props 타입 검사

 

1. PropTypes

리액트에서는 props를 통해서 다른 컴포넌트에 데이터를 전달할 수 있고, 이를 통해 재사용 가능한 컴포넌트를 만들 수 있다.

우연찮게 props에 타입 검사를 할 수 있다는 것을 알게 되어 정리해보려 한다.

 

 

1.1. props에 타입 검사를?

요새 핫한 타입스크립트는를 쓰는 이유 중 하나는 타입을 엄격하게 체크해서 에러를 줄이기 위함도 있다.

props에 타입 검사가 필요한 이유도 이와 결이 같다고 본다. 컴포넌트가 잘못된 타입의 props를 전달받거나,

필요한 props가 누락된다면 의도치 않은 에러로 이어질 것!.. PropTypes는 이런 에러를 방지해줄 수 있다.

참고로 리액트 공식문서에 따르면 PropTypes는 React v15.5부터 prop-types라는 패키지로 분리되었다!..

그럼 prop-types를 어떻게 쓸까?? 🤔

 

 

2. PropTypes 적용하기

2.1. 설치

일단 설치를 하자.

npm install prop-types 

yarn을 쓰고 있다면 이렇게 설치할 수 있다.

yarn add prop-types

 

 

2.2. 타입에 따른 다양한 프로퍼티

리액트 공식문서에 따르면 아래와 같이 유효성 검사가 가능하다.

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  // prop가 특정 JS 형식임을 선언할 수 있습니다.
  // 이것들은 기본적으로 모두 선택 사항입니다.
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  }

 

객체에 적용할 수 있는 유효성 검사도 정말 많다.

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

  // 특정 타입의 프로퍼티 값들을 갖는 객체
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

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

  // 추가 프로퍼티에 대한 경고가 있는 객체
  optionalObjectWithStrictShape: PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  }),

 

 

2.3. 필수 prop 지정하기

isRequired 라는 속성으로 반드시 전달받아야 하는 값임을 명시할 수 있다.

  // 위에 있는 것 모두 `isRequired`와 연결하여 prop가 제공되지 않았을 때
  // 경고가 보이도록 할 수 있습니다.
  requiredFunc: PropTypes.func.isRequired,

  // 모든 데이터 타입이 가능한 필수값
  requiredAny: PropTypes.any.isRequired,

 

 

2.4. default props 지정하기

props에 default 값을 넣는 것은 다른 방법으로도 가능하지만, 이렇게 defaultProps 프로퍼티를 할당해서 초기값을 지정해줄 수도 있다.

Greeting.defaultProps = {
  name: 'Stranger'
};

 

2.5. 활용

User라는 컴포넌트가 있을 때 실제로 이렇게 지정해줄 수 있다.

User.propTypes = {
  age: PropTypes.number,
  name: PropTypes.string.isRequired,
};

그럼 name 값이 없을 경우 콘솔에서 이런 에러를 만날 수 있다.

 

 

3. 참고

리액트 공식 문서
https://ko.reactjs.org/docs/typechecking-with-proptypes.html

PropTypes와 함께 하는 타입 검사 – React

 

[React] PropTypes 쓰는 이유, 방법