[React] Prop-types

Prop-types란

전달받은 props가 내가 원하는 props인지 확인해주는 package.

구성 요소에 전달된 속성의 의도한 유형을 정해줄 수 있다.
구성요소에 전달된 데이터를 확인하고 일치하지 않는 경우 개발 단계에서 경고를 띄워 줌.

 

npm i prop-types //설치

import PropTypes from "prop-types";

npm install을 이용해 설치 해주고 파일 위에 선언 해준다.

 

const fruitList = [
  {
    id: 1,
    name: "orange",
    price: "2,000",
    store: 3
  },
  {
    id: 2,
    name: "apple",
    price: "3,000",
    store: 5
  },
  {
    id: 3,
    name: "grape",
    price: "4,000",
    store: 5
  }
]

function Fruit({name, price, store}) {
  return (
    <div>
      <h2>Fruit name : {name}</h2>
      <p>{price}원</p>
      <p>{store}</p>
    </div>
    )
}



function App() {
  return (
    <div>
      {fruitList.map((item)=>(
        <Fruit key={item.id} name={item.name} price={item.price} store={item.store} />
      ))}
    </div>
  );
}

Fruit.propTypes={
  name: PropTypes.string,
  price:PropTypes.string,
  store:PropTypes.number
}

이렇게 props를 받는 함수에 propTypes를 사용하여
어떤 타입을 받기로 했는지 정리해줌.

예를들어 name을 string으로 받는다고 해놓고
number값을 전송해준다면? 

 

index.js:1 Warning: Failed prop type: Invalid prop `name` of type `number` supplied to `Fruit`, expected `string`.

Fruit에 제공된 name은 string을 예상했는데 number라는 위와 같은 오류 메세지를 확인할 수 있음.

 

이러한 propTypes의 오류 체크 기능으로
해당 property에 잘못 된 데이터를 넣었을 때 체크가 가능하다.

 

다양한 타입체크

PropTypes.array,
PropTypes.bool,
PropTypes.func,
PropTypes.number,
PropTypes.object,
PropTypes.string,
PropTypes.symbol,
PropTypes.arrayOf(PropTypes.string) //배열 안의 요소

필수값 체크

property: PropTypes.numger.isRequired,

이렇게 뒤에 isRequired를 넣어주면 필수값이라는 것을 의미함.
store이라는 property에 데이터가 없으면(undefined) 경고를 띄움.

 

 

 

https://www.npmjs.com/package/prop-types
이쪽에서 좀 더 자세하게 볼 수 있다.