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

propTypes 속성의 두 작성

　propTypes 속성에는 두 가지 방법이있다합니다. 개체의 속성으로 설명하는 문법과 클래스와 함께 사용하는 경우에만 사용할 수있는 static 속성으로 설명하는 기법입니다.

개체의 속성으로 설명

　지금까지 본 기사에서 소개 해왔다 작성은 여기였습니다. 구성 요소를 정의하는 객체에 대해 propTypes을 속성으로 러 장이 동시에 보급함으로써 정의를 실현합니다.

　표기법은 다음의 형태입니다.

목록 10 propTypes을 속성으로 기술 한 예

class Hoge extends React . Component { 
  render () { ... } }       


Hoge . propTypes = { 
  aaaa : PropsTypes . xxxxxx , 
  bbb : PropTypes . xxxxxx
 }   

　또한 함수 선언 만에 정의 된 상태 비 저장 구성 요소에 대해서도 같은 기법으로 propTypes 속성을 정의 할 수 있습니다.

목록 11 무국적 구성 요소에 propTypes 속성을 정의하는

function Hoge ( props ) { // 구성 요소의 정의 }  
  


Hoge . propTypes = { 
  aaaa : PropsTypes . xxxxxx , 
  bbb : PropTypes . xxxxxx
 }   

　어느 경우에도 공통으로 정의 할 수 있기 때문에 기본적으로 여기 기법으로 쓴 것이 혼란이 적을지도 모릅니다.

static 속성으로 설명

　static 키워드는 ES2015에 도입 된 비교적 새로운 기법입니다. 클래스 내에서 작성하여 클래스 정의에 유일한 속성을 정의 할 수 있습니다. static 키워드를 사용하여 정의 된 속성의 수를 static 속성이라고합니다.

　static 속성을 사용하여 propTypes를 정의하면 다음 작성됩니다.

목록 12 static 속성으로 propTypes을 정의하는

class Hoge extends React . Component { static propsTypes = { 
    aaaa : PropsTypes . xxxxxx , 
    bbb : PropTypes . xxxxxx
   }    
     

  render () { ... } }   

　이쪽이 클래스에 의해 설명 될 수 분 구성 요소의 특성을 정의하는 느낌을 강하게 가질 수 같은 효과는 기대할 수 있지만, 행동은 객체의 속성으로 설명하는 것과 동일합니다. 취향에 따라 어느 작성을 사용할지 선택합니다.

정리

　이번에는 Props의 형태를 정의하는 방법에 대해 소개했습니다. material-ui를 비롯한 많은 React 구성 요소 라이브러리에는 propTypes 속성이 정의되어 있기 때문에 소스 코드를 읽고 참고로하면 좋을 것입니다.

　다음은 React와 함께 상태 관리에 사용되는 경우가 많다 Redux 소개합니다. 복잡한 상태를 관리 할 때 본격적으로 응용 프로그램을 만들어 가는데 큰 도움이됩니다. 지켜봐 주시기 바랍니다.