리액트[기초] propTypes

propTypes 이란?

• 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 사용한다

---

propTypes 지정하는 방법 

1.  코드 상단에 prop-types를 import 해준다

2. 컴포넌트에서 설정해준다(설정한 값은 전달될 때 무조건 설정한 형태로  전달되어야 한다)

// 자식 컴포넌트
import PropTypes from 'prop-types';

const MyComponent = ({ name, children }) => { 생략.. }

MyComponent.defaultProps = {
	name: '기본 이름'
};

// name 은 무조건 문자열(string)형태로만 전달해야된다
MyComponent.propTypes = {
	name: PropTypes.string
};

export default MyComponent;

// 부모 컴포넌트(string 값으로 전달 된 올바른 예)
import MyComponent from './MyComponent';
const App = () => {
	return <MyComponent name={"hi"} >하이</MyComponent >;
};
 export default App;

// 부모 컴포넌트(string 형태여야 하는데 name이 number 형태로 잘못된 예)
import MyComponent from './MyComponent';
const App = () => {
	return <MyComponent name={10} >하이</MyComponent >;
};
export default App;

---

isRequired를 사용해서 필수  propTypes 설정

• isRequired는 propTypes를 지정하지 않았을 때 console에 경고 메시지를 띄워주고 싶을 때 사용한다
• propTypes를 지정할 때 뒤에 isRequired를  붙여주면 된다 

// 자식 컴포넌트
import PropTypes from 'prop-types';

const MyComponent = ({ name, favoriteNumber ,children }) => { 
   return(
   // 다른 부분은 생략..
   좋아하는 숫자는 {favoriteNumber} 입니다.
);
}

MyComponent.defaultProps = {
	name: '기본 이름'
};

// name 은 무조건 문자열(string)형태로만 전달해야된다
MyComponent.propTypes = {
	name: PropTypes.string
    favoriteNumber:PropTypes.number.isRequired
};

export default MyComponent;

/* 
isRequired 를 사용 했으면 부모 컴포넌트에서 
favoriteNumber 값을 전달 해주어야한다 해주지 않으면 않으면 오류가 난다 
*/
import MyComponent from './MyComponent';
const App = () => {
	return (
    <MyComponent name="React" favoriteNumber = {10} >
    하이
    </MyComponent >
   );
};
 export default App;

---

propTypes 종류

[참고] https://github.com/facebook/prop-types 

 

propTypes 에서는 여러가지 종류를 설정 할 수 있다
array	배열
arrayOf	특정propType 으로 이루워진 배열을 의미한다. 예를 들어 arrayOf(PropTypes.number) 는 숫자로 이루어진 배열이다
bool	true 혹은 false 의 값
func	함수
number	숫자
object	객체
string	문자열
symbol	Es6의 Symbol
node	렌더링 할 수 있는 모든것(숫자, 문자열, 혹은 JSX 코드, children도 node PropType 이다)
instanceOf (클래스)	특정 클래스의 인스턴스 (예 : instanceOf(MyClass))
oneOf (['dog' , 'cat' ])	주어진 배열 요소 중 값 하나
oneOfType ([ React.PropTypes.string, PropTypes.number])	주어진 배열 안의 종류 중 하나
objectOf( React.PropTypes.number)	객체의 모든 키 값이 인자로 주어진 PropType 인 객체
shape ({ name: PropTypes.string, num:PropTypes.number })	주어진 스키마를 가진 객체
any	아무 종류