PropTypes

PropTypes를 통해 props로 전달된 데이터 타입을 검사하여 에러를 방지

개발의 규모가 커질수록 발생하는 오류 또한 증가한다.

이를 위해 React는 내장된 타입 검사 기능들을 제공하는데 그 중 컴포넌트 props에 관련된 타입 검사를 위해 propTypes가 사용된다.

PropTypes 사용방법

PropTypes를 사용하여 컴포넌트 props의 타입 검사를 하는 방법은 다음과 같다.

1. npm i prop-types 명령어로 PropTypes를 설치

2. 설치한 패키지를 해당 컴포넌트로 불러오기

import PropTypes from 'prop-types';

3. propTypes 프로퍼티를 통해 props의 유효성을 검사

AppLayout.propTypes = {
  children: PropTypes.object.isRequired,
}

최종적으로 완성된 결과는 다음과 같다.

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

const AppLayout = ({ children }) => {
  return (
    <div>
      <div>공통메뉴</div>
      {children}
    </div>
  )
};

AppLayout.propTypes = {
  // props로 전달된 children의 유효성을 검사
  children: PropTypes.object.isRequired,
}

export default AppLayout;

구체적인 유효성 검사

위의 예제와 같이 단일한 형태의 props가 아닌 복합적인 형태의 데이터라면 아래와 같이 구체적으로 유효성을 검사해 오류를 방지할 수 있다.

// AppLayout.js파일
import React from 'react';
import PropTypes from 'prop-types';

const AppLayout = ({ children }) => {
  return (
    <div>
      <div>공통메뉴</div>
      {children}
    </div>
  )
};

AppLayout.propTypes = {
  post: PropTypes.shape({
    id: PropTypes.number,
    User: PropTypes.object,
    content: PropTypes.string,
    onClose: PropTypes.func, // 함수
    createdAt: PropTypes.object, // 날짜 객체
    Comments: PropTypes.arrayOf(PropTypes.object), // 객체들의 배열 [{}, {}, {}]
    Images: PropTypes.arrayOf(PropTypes.object), // 객체들의 배열 [{}, {}, {}]
  })
}

export default AppLayout;

참고 자료

React 공식문서
웹 게임을 만들며 배우는 React - 제로초