React prop-types

1. Props-types 란?

props-types는 React 컴포넌트에 전달되는 props의 데이터 타입과 유효성을 검사하는 라이브러리이다. 이 기능을 사용하면, 컴포넌트가 기대하는 props를 정확히 전달받고 있는지 확인할 수 있으며, 개발 중 오류를 예방하고 코드의 안정성을 높일 수 있다.

 

설치 방법

npm install prop-types

 

왜 사용하는가?

1. 디버깅 도구 제공 : 잘못된 props 전달 시 경고 메세지를 출력하여 개발자에게 문제를 알림

2. 코드 가독성 향상 : 어떤 props가 필수인지, 데이터 구조는 어떤지 명확히 정의할 수 있다.

3. 예측 가능성 증가 : 전달받은 데이터가 예상치 못한 값일 경우 방지한다.

 

2. 사용 예제

2-1. 간단한 예제

import PropTypes from 'prop-types';

function Greeting({ name, age }) {
  return (
    <div>
      <p>Hello, {name}!</p>
      <p>You are {age} years old.</p>
    </div>
  );
}

// PropTypes를 사용하여 props 유효성 검사
Greeting.propTypes = {
  name: PropTypes.string.isRequired, // 필수 문자열 타입
  age: PropTypes.number,            // 선택 숫자 타입
};

// 기본 props 설정 (optional)
Greeting.defaultProps = {
  age: 18, // age가 전달되지 않을 경우 기본값 사용
};

export default Greeting;

 

name은 필수이고, 문자열 타입이어야 함

age는 선택적이며, 숫자 타입어야 하며, 전달되지 않으면 기본값 18을 사용

 

2-2. 복잡한 구조(객체와 배열을 다룰 때)

import PropTypes from 'prop-types';

function TodoItem({ item }) {
  return (
    <li>
      <p>{item.title}</p>
      <p>{item.done ? '완료됨' : '진행 중'}</p>
    </li>
  );
}

TodoItem.propTypes = {
  item: PropTypes.shape({
    title: PropTypes.string.isRequired,
    done: PropTypes.bool,
  }).isRequired, // 필수 객체 타입 정의
};

export default TodoItem;

 

PropTypes.shape: 객체의 각 속성과 데이터 타입을 세부적으로 정의

inRequired 필수적으로 전달되어야 함

 

2-3. 열거형(enum)과 타입 조합

MyComponent.propTypes = {
  status: PropTypes.oneOf(['active', 'inactive', 'pending']).isRequired, // 특정 값만 허용
  data: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]).isRequired, // 문자열 또는 숫자 허용
};

 

PropTypes.oneOf: 특정 값 중 하나만 허용

PropTypes.oneOfType : 여러 타입 중 하나를 허용

 

2-4. 사용자 정의 유효성 검사

MyComponent.propTypes = {
  customProp: function (props, propName, componentName) {
    if (!/^[a-zA-Z]+$/.test(props[propName])) {
      return new Error(
        `Invalid prop \`${propName}\` supplied to \`${componentName}\`. Validation failed.`
      );
    }
  },
};

 

사용자 정의 유효성 검사 : 특정 조건에 따라 경고 메세지 출력

3. 검증 가능한 데이터 타입

 

4. 장점과 단점

장점

• 디버깅 효율성 : 런타임에 props 타입 관련 오류를 바로 확인 가능
• 명확한 문서화 : 코드만 보고도 컴포넌트의 props 요구사항을 쉽게 이해 가능
• 유현성 : 복잡한 데이터 구조 및 사용자 정의 유효성 검사 지원

단점

• 프로덕션 환경에서는 유효성 검사가 비활성화됨(개발 단계에서만 작동)
• TypeScript와 비교하면 정적 타입 검사를 제공하지 않음