React 기초 (2) : prop-types

npm i prop-types

prop-types는 부모로 부터 물려받은 prop의 타입을 체크해주는 것이다.

 

TS 기반 react에서는 당연히 쓸 필요가 없다.

 

하여튼, 설치 후에는 제대로 설치가 되었는지 package.json의 dependencies에 가서 확인하자.

import PropTypes from "prop-types";

 

 

활용법은 다음과 같다.

대소문자에 민감하게 반응하자. 컴포넌트 뒤에 propTypes가 아닌 PropTypes를 적는 등 스펠링 오류가 자주 발생한다.

우리가 import한 PropTypes는 '타입'임을 기억하자.

 

우리는 컴포넌트라는 객체의 propTypes를 이용하여 props를 검증하는데 해당 타입들을 PropTypes라는 패키지에서 정의한 타입 정의를 이용해 검증하는 것이다.

import React from "react";
import PropTypes from "prop-types";

const MyComponent = ({ name, children }) => {
  return (
    <>
      <div>{children}</div>
      <div>{name}</div>
    </>
  );
};

MyComponent.propTypes = {
  name: PropTypes.string,
  children: PropTypes.number,
};

export default MyComponent;

 

propTypes는 여러 가지 속성을 줄 수 있다.

Food.propTypes = {
  fav: PropTypes.string.isRequired,
  image: PropTypes.string.isRequired,
  rating: PropTypes.number.isRequired
};

 

props가 객체로 이루어져 있다면 shape 메서드를 통해 내부에 각 요소들의 타입을 지정해줄 수도 있다.

PostCard.propTypes = {
  post: PropTypes.shape({
    User: PropTypes.object,
    content: PropTypes.string,
    img: PropTypes.string,
  }),
};

// {
//     User: { id: 1, nickname: "darren" },
//     content: "first~",
//     img:
//       "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTqDGpw2_ahghYiOkZvHzTkTAVCShvenxMNgw&usqp=CAU",
//   }

 

 

이외에도 

node (모든 것. 문자열, 컴포넌트, 숫자 모든 것이 node다.)

element (태그. 컴포넌트도 태그이므로 컴포넌트도 해당 됨. <Home />도 element.) 

elementType (<Home />과 같은 컴포넌트 형태가 아니라 Home으로 넘어올 때)

oneOf(['News', 'Photos']) 

oneOfType([

    PropTypes.string,

    PropTypes.number,

    PropTypes.instanceOf(Message)

  ]),

PropTypes.arrayOf(PropTypes.number),

 

등등이 존재한다.

 

 

propType이 틀렸다고 해서 앱이 실행이 안되는 것은 아니다. 콘솔에 경고만 뜰 뿐이다.

 

 

 

 

다른 활용 예를 보고 싶다면 아래를 참고하자.

 

https://ko.reactjs.org/docs/typechecking-with-proptypes.html

PropTypes와 함께 하는 타입 확인 – React