Front-end/React
[React]missing in props validation
지니어스팍
2023. 8. 22. 13:10
728x90
728x90
문제 발생
Card를 컴포넌트를 만들어서 요기조기 쓰려고 코드를 짰다!
import React from "react";
import Card from "../assets/NfastCard.png";
function NfastCard({ name, date, price }) {
return (
<div>
<img src={Card} alt="car!" />
<h2>{name}</h2>
<p>{date}</p>
<div>{price}</div>
<button type="button">확인</button>
</div>
);
}
export default NfastCard;
하.지.만
컴포넌트에 props를 넣는과정에서 " missing in props validation " 에러가 뜬다.
해결하기 (대소문자 구분이 까다로우니 유의하자 ㅠㅠ)
설치하기
props-types을 지정해줘야한다. 지정해주기위해선 설치가 필요하다.
npm i prop-types
PropTypes 는 받은 데이터가 유효한 지 확인하는데 사용할 수 있는 유효성 검사기의 범위를 내보낸다.
prop에 유효하지않은 값이 전달되면 자바스크립트 콘솔에 경고가 노출된다.
import 하기
import PropTypes from 'prop-types';
propTypes 를 지정한다.
NFastCard.propTypes = { name: PropTypes.string.isRequired, date: PropTypes.string, price: PropTypes.number, };
.isReqired 는 반드시 포함해아하는 prop인데 이걸 붙이지 않으면 defaultProps를 지정해야한다.
NFastCard.defaultProps = { date: "날짜", price: 0, };
수정한 코드 전체
import PropTypes from "prop-types";
import React from "react";
import Card from "../assets/NfastCard.png";
function NFastCard({ name, date, price }) {
return (
<div>
<img src={Card} alt="car!" />
<h2>{name}</h2>
<p>{date}</p>
<div>{price}</div>
<button type="button">확인</button>
</div>
);
}
NFastCard.defaultProps = { date: "날짜", price: 0, };
NFastCard.propTypes = { name: PropTypes.string.isRequired,
date: PropTypes.string,
price: PropTypes.number,
};
export default NFastCard;
결과
728x90
728x90