[React] PropTypes 개념 알아보고 활용하기

1. 사용 이유

공식문서에 따르면

앱이 커짐에 따라 타입체킹을 통해 많은 버그를 잡을 수 있습니다. 일부 어플리케이션에서 Flow나 TypeScript같이 어플리케이션 전체에서 타입체크를 할 수 있는 자바스크립트 확장을 사용할 수도 있습니다. 하지만 이런 것들을 사용하지 않는다면 React에서 빌트 인 타입 체킹이 가능합니다. 컴포넌트의 props에서 타입을 체크하고싶다면 특별한 propTypes 속성을 할당할 수 있습니다.

위의 같은 이유가 대표적이다.

자바스크립트의 유연한 특성 때문에 작성이 편한 반면, 파일이 많아지면 생산성이 떨어진다는 점 때문에 타입스크립트를 많이 사용한다. 자바스크립트를 이용해 앱을 개발해야 하는 상황에서는 이러한 문제점을 피하기 위해 PropTypes를 활용하는 것을 권장한다.

PropTypes는 부모로부터 전달받은 prop의 데이터 type을 검사한다. 자식 컴포넌트에서 명시해 놓은 데이터 타입과 부모로부터 넘겨받은 데이터 타입이 일치하지 않으면 콘솔에 에러 경고문이 띄워진다.

2. 장점과 단점

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

1) 장점

1. 부모에게서 받아온 name이라는 props가 string 형태가 아니라 숫자, 함수 또는 객체 등 다른 형태면 콘솔에 에러 메시지가 출력된다. 이는 리액트가 렌더링하는 과정에서 잘못된 속성값 타입을 검사해 주기 때문에 가능한다.
2. 타입 정의만으로도 좋은 문서가 될 수 있다는 점이다. 위의 코드는 컴포넌트를 사용하는 사람이 자세히 뜯어보지 않으면 속성값의 타입을 알기가 어렵다. 하지만 propTypes를 이용해 속성값의 타입 정보를 위에 정의해 주면 컴포넌트의 로직을 이해하지 않고도 타입 정보를 한눈에 파악할 수 있다.

2) 단점

1. 속성값 타입을 검사하기 위해 별도의 연산이 필요하다. 따라서 성능상의 이유로 개발 모드에서만 확인된다.

3. 사용

npm install --save prop-types

위의 명령어를 쳐서 prop-types를 설치한다.

import PropTypes from 'prop-types'; // ES6
var PropTypes = require('prop-types'); // ES5 with npm

그리고 import를 해준다.

4. 종류

MyComponent.propTypes = {
  // 리액트 요소
  // <div>123</div> , <Component />
  menu: PropTypes.element,
  
  // 컴포넌트 함수가 반환할 수 있는 모든 것(비추)
  // <SomeComponent />, 123
  description: PropTypes.node,
  
  // Message 클래스로 생성된 모든 객체
  // new Messages() -> 참, new Car() -> 거짓
  message: PropTypes.instanceOf(Message),
  
  // 배열에 포함된 값 중에서 하나를 만족
  name: PropTypes.oneOf(["jake", "olivia"]),

  // 배열에 포함된 타입 중에서 하나를 만족
  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])

  // 특정 타입만 포함하는 배열
  // [1, 5, 7] -> 참, ['a', 'b'] -> 거짓
  ages: PropTypes.arrayOf(PropTypes.number),

  // 객체의 속성값 타입을 정의
  // {color: 'red', weight: 123} -> 참
  info: PropTypes.shape({
    color: PropTypes.string,
    weight: PropTypes.number
  })

  // 객체에서 모든 속성값의 타입이 같은 경우
  // {prop1: 123, prop2: 456}
  infos: PropTypes.objectOf(PropTypes.number)
}

5. 활용

MyComponent.propTypes = {
  age: function(props, propName, componentName) {
  	const value = props[propName]
    if (value < 10 || value > 20) {
      return new Error(
      	`Invalid prop ${propName} supplied to ${componentName}.`
      )
    }
  }
}

이처럼 propTypes가 제공하는 기본적인 타입 정의 함수를 이용하면 웬만한 타입 정보는 표현할 수 있다. 그리고 사용자 정의 유효성 검사기를 지정할 수도 있다. 검사 실패 시에는 Error 객체를 반환해야 한다.