패스트캠퍼스 챌린지 17일차 - 리액트 PropTypes 로 타입 검사하기

 

PropTypes - 타입 검사

 

버그 발생 확률을 낮추기 위해 애플리케이션의 타입 검사를 javascript extensions(Flow, TypeScript 등)을 사용할 수 있지만, React에서는 타입 검사 기능을 내장하고 있다.

 

 

PropType는 클래스, 함수형, 고차 컴포넌트 모두에서 사용가능하다.

 

PropTypes의 Validator

 

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  // prop가 특정 JS 형식임을 선언할 수 있습니다.
  // 이것들은 기본적으로 모두 선택 사항입니다.
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // 랜더링 될 수 있는 것들은 다음과 같습니다.
  // 숫자(numbers), 문자(strings), 엘리먼트(elements), 또는 이러한 타입들(types)을 포함하고 있는 배열(array) (혹은 배열의 fragment)
  optionalNode: PropTypes.node,

  // React 엘리먼트.
  optionalElement: PropTypes.element,

  // React 엘리먼트 타입 (ie. MyComponent)
  optionalElementType: PropTypes.elementType,

  // prop가 클래스의 인스턴스임을 선언할 수 있습니다.
  // 이 경우 JavaScript의 instanceof 연산자를 사용합니다.
  optionalMessage: PropTypes.instanceOf(Message),

  // 열거형(enum)으로 처리하여 prop가 특정 값들로 제한되도록 할 수 있습니다.
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  // 여러 종류중 하나의 종류가 될 수 있는 객체
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // 특정 타입의 행렬
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // 특정 타입의 프로퍼티 값들을 갖는 객체
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  // 특정 형태를 갖는 객체
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),

  // 추가 프로퍼티에 대한 경고가 있는 객체
  optionalObjectWithStrictShape: PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  }),

  // 위에 있는 것 모두 `isRequired`와 연결하여 prop가 제공되지 않았을 때
  // 경고가 보이도록 할 수 있습니다.
  requiredFunc: PropTypes.func.isRequired,

  // 모든 데이터 타입이 가능한 필수값
  requiredAny: PropTypes.any.isRequired,

  // 사용자 정의 유효성 검사기를 지정할 수도 있습니다.
  // 검사 실패 시에는 에러(Error) 객체를 반환해야 합니다.
  // `oneOfType`안에서는 작동하지 않으므로 `console.warn` 혹은 throw 하지 마세요.
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

  // `arrayOf` 와 `objectOf 에 사용자 정의 유효성 검사기를 적용할 수 있습니다.
  // 검사 실패 시에는 에러(Error) 객체를 반환해야 합니다.
  // 유효성 검사기는 배열(array) 혹은 객체의 각 키(key)에 대하여 호출될 것입니다.
  // 유효성 검사기의 첫 두 개의 변수는 배열 혹은 객체 자신과 현재 아이템의 키입니다.

  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })
};

 

Proptypes 특징 

 

1. PropTypes.element를 이용하여 컴포넌트에 전달되는 children의 갯수를 제한 할 수 있다. (원래는 제한이 없음)

const children = this.props.children;

MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

2. 컴포넌트에 defaultProps properties를 할당하여 props의 초깃값을 정의할 수 있다.

  (전달된 props의 값이 없을때 적용된다.)

  defaultProps에도 propTypes의 타입검사가 적용되기 때문에 propTypes를 정의하기 전에 선언해야한다.

// props의 초깃값을 정의합니다.
Greeting.defaultProps = {
  name: 'Stranger'
};

3. 함수형 컴포넌트에 propTypes를 적용하기 위해서는 바로 export default function Component 블라블라 하면 안되고,

   별도의 함수로 컴포넌트를 선언한 뒤에 PropTypes를 추가해야한다.

 

---

오늘 part1을 완강했다.

이전 프로젝트에서 급해서 닥쳐서 사용했던 개념들이 공식문서에 자세하게 설명되어있었다.

(보통의 공식문서는 불친절한데 리액트팀은 매우 친절한 것 같다.)

eslint와 같이 사용하면 좀더 체계적으로 코드를 작성할 수 있을거 같다.

이전엔 매우 고생했는데 다시 한다면 고생을 반정도만 할거 같다.

 

 

 

 

 

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.