yeon
yeon I am a Korean web programmer with bboy dancing as a hobby. :)

React PropTypes

React PropTypes

React PropTypes

개발하는 앱이 커질수록 타입 확인을 통하여 미리 많은 버그들을 잡아낼 수 있다. Flow 또는 Typescript를 활용하여 Javascript 타입을 확인 할 수 있다. React에서는 React에 내장된 컴포넌트의 props 타입 확인을 지원하며 prop-types 라이브러리와 함께 props 타입 검사가 가능하다.


15.5버전 부터는 prop-types 라이브러리를 임포트 해주어 사용해야한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Before (15.4 and below)
import React from 'react';

class Component extends React.Component {
  render() {
    return <div>{this.props.text}</div>;
  }
}

Component.propTypes = {
  text: React.PropTypes.string.isRequired,
}

// After (15.5)
import React from 'react';
import PropTypes from 'prop-types';

class Component extends React.Component {
  render() {
    return <div>{this.props.text}</div>;
  }
}

Component.propTypes = {
  text: PropTypes.string.isRequired,
};



propTypes로 컴포넌트의 props 타입 검사는 클래스, 함수 컴포넌트 모두 가능하다.

1
2
3
4
5
6
7
8
9
10
11
// After (15.5)
import React from 'react';
import PropTypes from 'prop-types';

function Component({text}) {
  return <div>{text}</div>;
}

Component.propTypes = {
  text: PropTypes.string.isRequired,
};



Default Props

초기 props 값도 지정이 가능하며 defaultProps를 설정시 초기 값이 정의된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// props의 초깃값을 정의합니다.
Greeting.defaultProps = {
  name: 'Stranger'
};

// "Hello, Stranger"를 랜더링 합니다.
ReactDOM.render(
  <Greeting />,
  document.getElementById('example')
);



PropTypes

기본적으로 Javascript 타입인 string, number, boolean symbol 등이 지정이 가능하다.

1
2
3
4
5
6
7
8
import PropTypes from 'prop-types';

Componenet.propTypes = {
	propString: PropTypes.string,
	propNumber: PropTypes.number,
	propBoolean: PropTypes.bool,
	propSymbol: PropTypes.symbol,
};



그리고 객체, 배열, 함수 형태의 타입도 지정이 가능하다.

1
2
3
4
5
Componenet.propTypes = {
	propObject: PropTypes.object,
	propArray: PropTypes.array,
	propFunction: PropTypes.func,
};



여러 종류 중 하나의 타입이 될 수 있는 경우 oneOfType을 사용하여 정의한다.

1
2
3
4
5
6
Component.propTypes = {
	propStringOrNumber: PropTypes.oneOfType([
		PropTypes.string,
		PropTypes.number,
	]),
};



특정타입의 배열과 특정타입의 객체의 경우에는 arrayOf, objectOf를 사용하여 정의한다.

1
2
3
4
Component.propTypes = {
	propArrayNumber: PropTypes.arrayOf(PropTypes.number),
	propObjectNumber: PropTypes.objectOf(PropTypes.number),
};



특정형태의 객체의 경우 shape으로 정의한다.

1
2
3
4
5
6
Component.propTypes = {
	propShape: PropTypes.shape({
		propString: PropTypes.string,
		propNumber: PropTypes.number,
	});
};



객체에 대한 properties를 정확하게 검사하기 위해서는 exact를 사용하여 정의하며 이때 객체의 properties가 다른 경우 warning이 발생한다.

1
2
3
4
5
6
7
8
Component.propTypes = {
	propShape: PropTypes.exact({
		propString: PropTypes.string,
		propNumber: PropTypes.number,
		propBoolean: PropTypes.bool,
		propSymbol: PropTypes.symbol,
	});
};



추가 많은 타입 정의들은 공식 홈페이지 PropTypes를 참고하자.



[Ref] :




comments powered by Disqus