JSX) props 검증 : propTypes

props 검증 : propTypes

propTypes는 그동안 사용해본적은 없고 이번에 기술서를 읽으면서 처음 알게된 기능입니다. 

여러 명의 개발자들이 협업하는 프로젝트의 경우, 또는 컴포넌트를 재사용할 수 있게 오픈해 놓은 경우 다른 개발자들이 사용할 때 컴포넌트를 본래 의도대로 잘 사용할 수 있도록 하기 위해 props에 전달해야할 값의 자료형을 지정해 놓는 것입니다. 

 

---

다음과 같이 임포트 해줘야 사용할 수 있습니다. 

import PropTypes from 'prop-types';

사용 방법은 defaultProps를 지정하는 방법과 같습니다. 

...

const Conpomenent = ({ name, extra }) => {
	return <div> hello {name} {extra} </div>;
}

...

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

...

이렇게 작성된 컴포넌트를 <Component name=3 /> 이렇게 호출하게 되면 name에 전달된 값이 string이 아니기 때문에 콘솔 창에 경고 메세지를 출력하게 됩니다. 그렇지만 화면에 'hello 3'이라는 값이 출력되긴 합니다.

---

isRequired

propTypes를 지정했어도 콘솔에 경고 메시지가 뜨는 것을 제외하면 화면에 그대로 출력되기 때문에 자료형을 제한하는 의미가 별로 없을지도 모릅니다. 

전달받은 값이 지정된 type을 지키지 않았다면 아예 출력되지 않게 하기 위해서 isRequired를 사용합니다.

...

Component.propTypes = {
	name: PropTypes.string.isRequired
};

...

이렇게 isRequired를 붙여주면 <Component name=3 />으로 호출한 경우, 3은 지정된 자료형인 string이 아니기 때문에 출력되지 않고, hello 만 출력되게 됩니다. 

---

PropTypes 종류 

array	배열
arrayOf(다른 proptype)	()에 지정한 특정 propType으로 이루어진 배열
bool	true or false
func	함수
number	숫자
object	객체
string	문자열
symbol	ES6의 symbol
node	렌더링 할 수 있는 모든 것 (숫자, 문자열, JSX 코드, children 등)
instanceOf	특정 클래스의 인스턴스
oneOf([배열])	['a','b'] 와 같이 주어진 배열의 요소 값 중 하나
oneOfType([propTypes 배열])	[React.PropTypes.string, PropTypes.number] 과 같이 주어진 배열 안의 type 중 하나
objectOf(React.PropTypes...)	객체의 모든 키 값이 인자로 주어진 PropType인 객체
shape({name: propTypes.string}, {num: propTypes.number})	다음과 같이 주어진 스키마 형식을 가진 객체
any	아무 종류 -> 지정 하지 않는 것과 마찬가지?