[ react ] props의 자료형을 검사할 수 있도록 만들어주는 prop-types 도구 설치

prop-types 설치

npm install prop-types

• 컴포넌트가 전달받은 props가 정말 내가 원하는 값인지 확인해준다.

• 예를 들어 내가 test props를 보내야 하는데 practice props를 보낼 수도 있다.
  이런 경우 prop-types를 통해 미리 컴포넌트에

  반드시 test props가 전달돼야 한다.

  라고 정의를 할 수 있다.

• 정의해놓은 test props가 아닌 다른 props가 전달될 경우 오류 메시지를 출력하게 할 수 있다.

package.json 'dependencies'에 추가된 prop-types 확인

{
  "name": "myfirst_movie_app_2021",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

• package.json에 prop-types가 확인되면 설치가 제대로 된 것이다.

아래 import를 추가해준다.

import PropTypes from 'prop-types';