"prop-types"에서 Props 데이터 형식 사용하기 - 2

propTypes 속성에 지정할 수있는 형태

　prop-types 라이브러리의 개요는 파악 할 수 있었는지 생각하기 때문에 본 절에서는 실제로 어떤 형태로 형식 정보를 표현할 수있는 방법을 소개하고 있습니다.

기본형

　먼저 JavaScript를 원시적 형에 대응하는 것으로서 다음의 형태가 준비되어 있습니다.

PropTypes 모듈에 정의 된 기본형

형태	의미
PropTypes.array	배열 형 (요소의 형태는 묻지 않는다)
PropTypes.bool	불리언 형
PropTypes.func	함수형
PropTypes.number	숫자
PropTypes.object	객체 형 (내부 구조는 불문)
PropTypes.string	문자열
PropTypes.symbol	기호 형 (※ 주 1)

※ 주 1 : 기호 형은 ES6에서 도입 된 데이터 형식 절대로 다른 값과 쓰지 않는 독특한 값을 생성 할 수 있습니다.

　array 형과 object 형에 대해서는 내부의 형태를 불문 않기 때문에 엄격한 타입 정의를하지 않으려는 경우에 유용합니다.

　또한 조금 특수한 형태로 다음의 세 가지가 준비되어 있습니다.

PropTypes 모듈에 정의 된 특수한 형태

형태	의미
PropTypes.element	React Element (children 등)
PropTypes.node	숫자, 문자열, Element 중 하나 (또는 ​​배열)
PropTypes.any	뭐라도

　element는 JSX를 전달할 때 사용합니다.

　any는 위에서 소개 한 모든 형태를 받아 들일 수있는 와일드 카드입니다. 별로 사용하지 않을 것입니다.

복잡한 형태

　그러면 기본 형식을 조합하여 복잡한 형태를 표현하는 기능에 대해 살펴 보겠습니다.

PropTypes 모듈에 정의 된 복잡한 형태를 표현하는 함수

형태	의미
PropTypes.instanceOf (HogeClass)	HogeClass 형 클래스의 인스턴스이다
PropTypes.oneOf ( 'A', 'B', 'C')	배열의 값 중 하나이기
PropTypes.oneOfType (T1, T2, ...])	배열 중 하나의 형태이다 (배열은 PropTypes.string 등의 형태)
PropTypes.arrayOf (T)	T 형의 요소를 가진 배열이다 (T는 PropTypes.string 등의 형태)
PropTypes.objectOf (T)	T 형의 속성을 가진 개체이다 (T는 PropTypes.string 등의 형태)
PropTypes.shape ({t1 : T1, t2 : T2, ...})	속성 이름 및 형식을 조합하여 정의

　이들 중 List.propTypes의 예에서 다룬 oneOf, arrayOf, shape 세 가지 매우 범용성이 높기 때문에, 꼭 활용 해주십시오.

필수 유형

　있는 속성이 필요한 경우는 끝에 isRequired을 부여하는 것으로 표현할 수 있습니다.

목록 5 속성이 필요한지 여부를 표현하는

Hoge . propTypes = { 
  name : PropTypes . string . isRequired , // 문자열 (필수) 
  address : PropTypes . string // 문자열 (전달 않아도) }     

　이 경우, Hoge 구성 요소에는 name 속성 만 전달해도 문제 없습니다.

실례로 보면

　그런데, PropTypes 모듈이 제공하는 형식이 대충 나타났다 곳에 위의 List 구성 요소의 propTypes 속성의 정의가 무엇인지 다시 확인해 봅시다.

　먼저 posts 배열입니다. 배열은 PropTypes.arrayOf 였지요.

목록 6 posts는 배열이므로 arrayOf로 표현

posts : PropTypes . arrayOf (...) 

　arrayOf 인수는 형식을 넘기 게되는 것입니다 만, posts의 내용은 간단한 number와 string 대신 "name, age, body '라는 세 가지 속성을 가진 객체의 배열했다. 단순히 "개체입니다"라고 말하고 싶은 것 뿐이라면 PropTypes.arrayOf (PropTypes.object) 상관 없다 것입니다 만, 이번에는 제대로 속성이 3 개 모두 갖추어져 있는지 확인 싶어서 PropTypes.shape을 사용하기로 했습니다.

목록 7 배열의 내부 형식은 shape으로 표현하기

posts : PropTypes . arrayOf ( PropTypes . shape ({ 
    name : ..., 
    age : ..., 
    body : ... }) ) 
     
  

> name와 body는 문자열에서 필수 항목이므로 PropTypes.string.isRequired으로 OK 네요.

목록 8 name와 body 필수 문자열

posts : PropTypes . arrayOf ( PropTypes . shape ({ 
    name : PropTypes . string . isRequired , 
    age : ..., 
    body : PropTypes . string . isRequired
   }) ) 
     

　자, 마지막으로 age이지만, 이것은 "teen", "twenties", "thirties", "fourties", "fifties"중 하나의 값을 갖는 필수였습니다. 하나의 값을 가질 것으로, PropTypes.oneOf을 사용합니다.

목록 9 age에 사용할 문자열을 oneOf에서 열거

posts : PropTypes . arrayOf ( PropTypes . shape ({ 
    name : PropTypes . string . isRequired , 
    age : PropTypes . oneOf ( "teen" , "twenties" , "thirties" , "fourties" , "fifties" ). isRequired , 
    body : PropTypes . string . isRequired
   }) ) 
    
      
      
      
      
      
     

　이제 복잡한 데이터 형을 가지는 posts 대해 propTypes 속성을 정의 할 수있었습니다. oneOf, arrayOf, shape 정말 유용하고, 이것과 기본 형식을 조합하면 대부분의 데이터 형은 표현 나옵니다. 꼭 명심합시다.