[React] Prop-types

재오·2022년 7월 11일
1

리액트

목록 보기
2/13
post-thumbnail
post-custom-banner

Prop-types란 무엇일까

우리가 정의한 props의 값이 컴포넌트에 제대로 전달되기 위해 필요한 것을 의미

Prop-types 이용하기

1) 터미널에 ' npm install prop-types ' 타이핑 하여 설치하자

2) App.js에서 import 해주기

import PropTypes from 'prop-types';

3) .propTypes 작성하기

Food.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.string.isRequired,
};
  • props에서 정의한 변수를 먼저 적어주고
  • 그 배열에서 얻을 자료형이 무엇인지를 미리 선언해주는 것이다. rating같은 경우에는 숫자형이기때문에 string으로 정의를 하면 오류가 발생한다. 따라서 number로 바꿔줘야한다
  • isRequired를 지우게 된다면 해당 props는 어떤 값을 받더라도 오류가 발생하지 않는다

import PropTypes from 'prop-types';

Food.propTypes = {
 name: PropTypes.string.isRequired,
 picture: PropTypes.string.isRequired,
 rating: PropTypes.number.isRequired,
};
profile
블로그 이전했습니다
post-custom-banner

0개의 댓글