import React from "react";
const MyCom = props => {
return <div>저의 번호는, {props.num}입니다.</div>;
};
MyCom.defaultProps = {
num: '3'
};
export default myCom;
// 저의 번호는, 3입니다.
props는 값을 조회할 때 props.num이란 키워드를 붙여줘야하는데
ES6에서는 비구조화 할당 문법을 사용하여 좀더 편리하게 조회하는 방법이 있다.
const MyCom = props => {
const { num, nick } = props;
return (
<div>
저의 번호는 { num }입니다 <br/>
닉네임은 { nick } 입니다.
</div>
);
};
함수형 컴포넌트에서는
const MyCom = ({ num, nick }) => {
return ();
이런식으로도 가능하다.
MyCom.propTypes = {
name: PropType.string,
favoriteNumber: PropTypes.number.isRequired
}
이런식으로 string, number 고정된 타입을 줄수 있고,
isRequired를 사용하여 favNumber의 값이 정의되지않으면 오류메시지를 표시한다.