propTypes

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

//rcc
class MyComponent extends Component {
static defaultProps = {
name: '기본 이름'
};

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

render() {
return (
<div>
안녕하세요, 제 이름은 {this.props.name} 입니다.
</div>
);
}
}

export default MyComponent;

 

defaultProps: 해당 prop 이 들어오지 않으면 사용하는 값.

propTypes: type 을 명시한다. 아닌 경우 warning.

 

propTypes 와 defaultProps 는 컴포넌트의 필수 사항이 아니다. 그렇지만 React 를 사용하여 꽤 큰 규모의 프로젝트를 진행한다면, 특히 다른 개발자와 협업을 한다면 해당 컴포넌트에 어떤 props 가 필요한지 쉽게 알 수 있어 개발 능률을 올릴 수 있다.

 

더 많은 propTypes 종류

• array: 배열
• bool: 참/거짓
• func: 함수
• number: 숫자
• object: 객체
• string: 문자열
• symbol: ES6 문법의 심벌 개체
• node 렌더링할 수 있는 모든 것(숫자, 문자열, element 또는 이들로 구성된 배열)
• element: 리엑트 요소
• instanceOf(MyClass): 특정 클래스의 인스턴스
• oneOf(['Male', 'Female']): 주어진 배열 요소 중 값 하나
• oneOfType([React.PropTypes.string, React.PropTypes.number]): 주어진 배열 안의 종류 중 하나
• arrayOf(React.PropTypes.number): 주어진 종류의 구성된 배열
• objectOf(React.PropTypes.number): 주어진 종류의 값을 가진 객체
• shape({name: React.PropTypes.string, age: React.PropTypes.number}): 주어진 스키마를 가진 객체
• any: 아무 종류

이 키워드들을 PropTypes.bool 혹은 PropTypes.any.isRequired 같은 방식으로 사용하면 된다.