[react] PropType

• 유효성 검사 및 타입 확인
• 패키지 설치 : npm i prop-types

const foodLike = [
    {
        id:1,
        name: "Home Alone",
        image: "https://upload.wikimedia.org/wikipedia/ko/3/31/%EB%82%98_%ED%99%80%EB%A1%9C_%EC%A7%91%EC%97%90_%ED%8F%AC%EC%8A%A4%ED%84%B0.jpg",
        rating: 5
    },
    {   
        id:2,
        name: "Harry Potter",
        image: "https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2F20151224_170%2Fineedu0810_1450929838016sVnO8_JPEG%2F2015-12-24_12-57-34.jpg&type=sc960_832",
        rating:4.9
    },
    {
        id:3,
        name: "Charlie and the Chocolate Factory",
        image: "https://lh3.googleusercontent.com/proxy/QP1GOFu0XJmAspchl3BiRjZPUzkNS27c9_dYfL1HaiFQjqAvOrN0e0S47WrlpdA7x9Bv7Hfk-AfzjgA3AJfE87whPvqJ9MOR1N0lJ5zP5gfy9qgCKwZxa_ShlFmFVZFuGaSJ",
        rating:4.8
    }
]



function Food({ name, picture, rating}) {
    return (
        <div>
            <h1>I like {name}</h1>
            <h4>{rating}/5.0</h4>
            <img src={picture} alt={name} />
        </div>

    );
}


// 유효성 검사
// isRequired는 필수요소 없으면 필수는 X , PropTypes.(데이터타입)
Food.propTypes = {
    name: PropTypes.string.isRequired,
    picture: PropTypes.string.isRequired,
    rating: PropTypes.number.isRequired
};

---

▶ Type의 종류

optionalArray: PropTypes.array

optionalBool: PropTypes.bool

optionalFunc: PropTypes.func

optionalNumber: PropTypes.number

optionalObject: PropTypes.object

optionalString: PropTypes.string

optionalSymbol: PropTypes.symbol

optinalUnion: PropTypes.oneOfType([ PropTypes.string, 
				PropTypes.number, PropTypes.instanceOf(Message)])
                
# 특정 유형의 배열 (아래는 정수형 배열)
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

# 특정 유형의 속성값을 가진 object( 정수형 데이터를 가지고 있음 )
optionalObjectOf: PropTypes.objectOf(PropTypes.number),​