[React] propTypes 설치하기

학습일 : 2023. 03. 16

---

터미널창에
npm i prop-types 를 입력하고 엔터를 하면 설치가 된다.

---

위 방법을 실행했을 경우 어떠한 에러가 난다면

 

터미널창에

1. npm install --global yarn 엔터

 

2. yarn add prop-types  엔터

 

하여 설치가 정상적으로 완료된다면

이제 PropTypes를 import 할 수 있는 상태가 된다.

---

그럼 import 하여 PropTypes를 사용해보도록 하자.

import PropTypes from "prop-types";

 

를 상단에 적어준다.
이렇게 import 해주면 밑에서 사용할 수 있는 상태가 된다.

 

전체 코드

Button.propTypes = {...}

이렇게 작성하여 사용할 수 있다.

import PropTypes from "prop-types"; 

function Button({text}) {
    return <button>{text}</button>;
}

Button.propTypes = {
    text: PropTypes.string.isRequired,
}

export default Button;

 

 

 

이렇게 propTypes를 사용하여 text의 경우 string 타입이고 필수라는 조건을 주었기 때문에

리액트가 Button의 경우 그런 조건에 어긋날 경우 경고를 해줄 수 있게 된다.