211222 리액트 PropTypes

* PropTypes에서 속성값 타입을 입력할 수 있다
는것은 무슨 소리란 말이요?

import PropTypes from 'prop-types';

User.propTypes = {...};
// prop-types 패키지가 있다.
속성값의 타입정보를 정의할 때 사용하는 리액트 공식 패키지


왜 타입이 필요한가?

js는 동적 타입, 실수 등 에러 발생 가능하기 때문.

아래를 보고 한눈에 무슨 타입인지 알고, 코딩할 때 실수안할걸 확신하면 동적 타입 쓰셈.

 

// propTypes가 없는 경우

/**
 * 
 * 코드를 읽어야 타입을 알 수 있다
 * 그러나 읽고나서도 명확하지 않음
 */
export default function User({type,age,male,onChangeName,onChangeTitle}){

	/**
	 * type이 문자열인것가고
	 * age는 무슨 타입인지 잘 모르겠음
	 * male도 잘 모르겠음
	 */
	function onClick(){
			const msg = `type: ${type}, age : ${age ? age : '알 수 없음'}`;
			log(msg, {colos: type==='gold'? 'red':'black'});
			//..
	}

	/**
	 * onChangeName은 함수인데 null일수도 있는것같음
	 */
	function onClick2(name, title){
		if (onChangeName){
			onChangeName(name);
		}
		onChangeTitle(title);
		male ? goMalePage(): goFemalePage();
		///...
	}
	//...
	return null;
}

 

---

* PropTypes.element ? 요소타입 
<div>hello</div> 참
<Profile /> 참
123 에러

* PropTypes.node
컴포넌트 함수가 반환하는 모든 것

* PropTypes.oneOf(['a','b'])
값이 이중 하나

*PropTypes.oneOfType(['a','b'])
타입이 이중 하나

* PropTypes.arrayOf(PropTypes.XXX)
PropTypes.XXX 타입으로만 이뤄진 배열

* PropTypes.shape({...})
객체를 통으로 타입 정의

* PropTypes.objectOf(PropTypes.number)
객체의 모든 속성값 타입이 같을때

+ 인자의 범위도 제한할 수 있다

 

 

import PropTypes from 'prop-types';

User.propTypes = {
	// 타입 체크
	male : PropTypes.bool.isRequired,
	age: PropTypes.number,
	type: PropTypes.oneOf(['gold', 'silver', 'bronze']),
	onChangeName : PropTypes.func,
	onChangeTitle : PropTypes.func.isRequired,

	// 인자 체크
	customCondition: function (props,propName,componentName){
		const value = props[propName];
		if (value < 10 || value > 20){
			return new Error(
				`NOT IN 10 <= ${value} <= 20 FROM ${componentName}`
			)
		}
	}
};

export default function User({type, age, male, onChangeName, onChangeTitle}){

	function onClick(){
		const msg = `type : ${type}, age: ${age ? age : '알 수 없음'}`
		console.log(msg, {color : type === 'gold' ? 'red' : 'black'});

		//...
	}

	function onClick2(name, title){
		if (onChangeName){
			onChangeName(name);
		}

		onChangeTitle(title);
		male ? goMalePage() : goFemalePage();
	}
	return null;
}

function goMalePage(){}
function goFemalePage(){}