[React.js/Side Lib.] PropTypes

🤷 React.js 프로그래밍을 위한 다양한 스킬들 - 3

지난 포스팅에서는, 거대한 컴포넌트를 프레젠테이션(표현) 사이드와 컨테이너(로직) 사이드로 분할하는 법을 공부했다.

이번엔, propTypes라는 props의 확인 및 검증용 라이브러리에 대해 공부했다.

---

📒 PropTypes 개념 및 사용목적

props를 확인하는 라이브러리이다. Parent로부터 전달받은 props가 적합한지 점검하는 등 아래 2가지 목적으로 쓰인다.

• prop validation: props가 적합하게 하달되었는지 확인하는 용도. 없거나 부적합하면 console에 경고 메세지 발생.
• documentation: props가 컴포넌트들에 전달되기 전 미리 확인하는 속도를 높이는 용도.

---

📒 PropTypes 사용방법

 

- 설치: 터미널 npm 활용

npm i prop-types 

 

- 사용법(클래스형 컴포넌트)

 

먼저, 'porp-types' 라이브러리에서 PropTypes로 import 처리를 해준다.

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

export class BestSeller extends React.Component {
  render() {
    return (
      <li>
        Title: <span>
          {this.props.title}
        </span><br />
        
        Author: <span>
          {this.props.author}
        </span><br />
        
        Weeks: <span>
          {this.props.weeksOnList}
        </span>
      </li>
    );
  }
}

// propTypes
BestSeller.propTypes = {
  title: PropTypes.string.isRequired,
  author: PropTypes.string.isRequired,
  weeksOnList: PropTypes.number.isRequired,
};

이처럼, Component.propTypes = { props: PropTypes.type } Object 형태로 설정할 수 있다. (객체 안밖 대문자 주의!)

 

isRequired가 붙은 값은 반드시 설정되어야 한다는 의미이며, 확인할 수 있는 type 종류는 아래와 같다.

kind	description
array	배열
bool	true/false
func	함수
number	숫자
object	객체
string	문자열
symbol	심벌 개체(ES6)
node	렌더링 가능한 모든것(number, string, element, 또는 그것들이 포함된 array/fragment)
element	React element
instanceOf(ClassName)	JS에서 instanceof로 정의 가능한 클래스 인스턴스
oneOf([…Value])	포함된 값들중 하나.(ex: oneOf([‘남자’,’여자’]))
oneOfType([…PropTypes])	포함된 PropTypes들중 하나. (ex: oneOfType([PropTypes.string, PropTypes.instanceOf(MyClass)]))
arrayOf(PropTypes)	해당 PropTypes으로 구성된 배열
objectOf(PropTypes)	주어진 종류의 값을 가진 객체
shape({key:PropTypes})	해당 스키마를 가진 객체.(ex:shape({name:PropTypes.string,age:PropTypes.number}))
exact({key:PropTypes})	명확하게 해당 스키마만 존재해야함.

* boolean은 bool, function은 func으로 쓰이는 점을 주의하자!

 

또한, 아래와 같이 class 안에서도 사용될 수 있다. (static)

export class BestSeller extends React.Component {
  render() { ... }
  
  static propTypes = {
    title: PropTypes.string.isRequired,
    author: PropTypes.string.isRequired,
    weeksOnList: PropTypes.number.isRequired
  }
}

 

 

- 사용법(함수형 컴포넌트) : 클래스와 동일하다.

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

export const GuineaPigs = (props) => {
  let src = props.src;
  return (
    <div>
      <h1>Cute Guinea Pigs</h1>
      <img src={src} />
    </div>
  );
}

// propTypes
GuineaPigs.propTypes = {
  src: PropTypes.string.isRequired
};

---

Props의 type을 지정함에 따라, 이에 해당되지 않는 props는 패스시키므로 스캔속도가 빨라진다고 이해된다.

실제, Child 컴포넌트에서 props 입출력 속도 향상을 위해 유용하게 쓰이는 라이브러리일 것 같다.