[React]missing in props validation

문제 발생

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;

결과