[React다루는기술] 04. PropTypes

in React on React 다루는 기술


PropTypes는 React에서 사용되는 도구로, 컴포넌트에 전달되는 데이터의 종류를 정의합니다.


1. PropTypes

PropTypes를 사용하면 컴포넌트에 전달되는 props의 타입을 정의할 수 있어, 잘못된 타입의 props가 전달되는 것을 방지할 수 있습니다. 이를 통해 코드를 더 안전하게 만들어주고, 잘못된 데이터가 전달되는 것을 미리 방지한다. PropTypes를 사용하면 개발자가 컴포넌트를 사용할 때 어떤 종류의 데이터가 필요한지 쉽게 이해할 수 있다.


App.js

import TestComponent from "./component/TestComponent";
import PropTypeComponent from "./component/PropTypeComponent";

function App() {
  return (
    <>
      <TestComponent data="SUCCESS" />
      {/* <PropTypeComponent name="" age={34} />: <<-- 에러발생: ailed prop type: 'PropTypeComponent'에 'name'는 empty string 이 올 수 없습니다. */}
      <PropTypeComponent name="용준" age={34} />
    </>
  );
}

export default App;


PropTypeComponent.js

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

// 함수형 컴포넌트
const PropTypeComponent = (props) => {
  return (
    <div>
      <p>이름 : {props.name}</p>
      <p>나이 : {props.age}</p>
      <p>{props.aboutme}</p>
    </div>
  );
};

// 컴포넌트에 전달되는 props의 타입을 정의
PropTypeComponent.propTypes = {
  //name은 "" empty가 들어오는 경우도 타입정의, PropTypes 자체에서는 빈 문자열을 체크 기능은 없음
  name: function (props, propName, componentName) {
    if (props[propName] === "") {
      return new Error(
        `'${componentName}'에 '${propName}'는 empty string 이 올 수 없습니다.`
      );
    }
  },
  age: PropTypes.number.isRequired, // age는 숫자(number) 타입이어야 함
  aboutme: PropTypes.string.isRequired, // name은 문자열(string) 타입이어야 함
};

// props의 기본값 설정
PropTypeComponent.defaultProps = {
  name: "Guest",
  age: 0,
  aboutme: "자기소개가 없습니다.",
};

export default PropTypeComponent;



2. PropTypes 종류

React의 PropTypes에는 여러 종류가 있습니다. 주요 PropTypes의 종류는 다음과 같습니다:

  1. 존재 여부 확인
    • PropTypes.any: 어떤 타입이든 상관 없음.
    • PropTypes.object: 객체.
    • PropTypes.array: 배열.
    • PropTypes.bool: 불리언 값 (true/false).
    • PropTypes.func: 함수.
    • PropTypes.number: 숫자.
    • PropTypes.string: 문자열.
    • PropTypes.symbol: ES6 심볼.
    • PropTypes.node: 렌더링 가능한 모든 것 (React 엘리먼트, 숫자, 문자열, fragment, 포함된 배열 등).
  2. 특정 타입 확인
    • PropTypes.instanceOf(Constructor): 특정 클래스의 인스턴스.
    • PropTypes.oneOf([value1, value2]): 주어진 값 중 하나.
    • PropTypes.oneOfType([type1, type2]): 주어진 유형 중 하나.
    • PropTypes.arrayOf(type): 특정 타입의 배열.
    • PropTypes.objectOf(type): 특정 타입의 객체 값.
  3. 복합적인 타입 확인
    • PropTypes.shape({ key: PropTypes.type }): 객체의 특정 구조.
    • PropTypes.exact({ key: PropTypes.type }): 정확한 구조를 가진 객체.
  4. 특수한 경우
    • PropTypes.any.isRequired: 필수 prop으로서 어떤 타입이든 가능.
    • PropTypes.elementType: 리액트 엘리먼트의 타입.



[출처]