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

Props에는 어떤 데이터를 전달하면 좋을까

　React를 사용할 기회가 늘어날수록 다른 사람이 만든 구성 요소를 만지는 기회도 늘어납니다. 연재 제 3 회 " React × Material-UI로 현대적인 UI를 구현하기 "에서 다룬 material-ui 등은 전형적인 "다른 사람이 만든 구성 요소"네요. 몇 달 전 자신이 작성한 코드도 다른 사람의 것으로 생각하는 편이 좋다고 설도 있기 때문에 혼자 개발하고도 기간이 길수록 본 기억이없는 구성 요소를 관리 할 수있는 기회 역시 증가 간다고 생각하는 편이 좋을 것입니다.

　그런데 다른 사람이 만든 구성 요소를 사용하는 경우 어떤 일이 곤란 있을까요? 예를 들어, 제 4 회 " React 의한 양식 / 목록의 기본 "에 나온 목록 1의 구성 요소에 대해 생각해 보겠습니다.

목록 1 List 구성 요소

<List posts = {this.state.posts} />
   

　List 구성 요소는 배열 형식의 게시물 데이터 (posts)을 받기에 게시물을 정렬하여 표시하는 기능을 가진 구성 요소였습니다. 소정의 데이터 형식으로 데이터를 전달하면 よしなに 표시 해준다. 적절한 입도의 책임을 가진 좋은 구성 요소입니다.

　그런데, 여기서 문제가되는 것이 "posts에 전달"소정의 데이터 형식 "이란 도대체 무엇인가"라는 것입니다. 구현을 보러 가면 알게한다는 것은 지당한 만 구성 요소의 구현 코드 중에서 "this.props ***"를 하나 하나 찾아서 그 데이터 유형이 무엇인지를 추측 해 나가는 는 끈기있는 작업 네요.

　는 구성 요소 하나 하나에 Props 데이터 형식을 기술 한 명세서를 쓰면 좋습니까? 아니면 그것에 가까운 내용의 댓글을 작성하여두면 좋습니까?

　아마도 그 방법은별로 현실적이지 않습니다. 프로그램을 변경하면 사양을 변경하는 문화 자체가 나쁜 것은 아니지만, 컴포넌트 단위로 실시하는 것은 너무 방대하고 복잡한 작업이되어 버립니다.

　Props의 형태를 쉽게 알 수있는 좋은 방법이 원하는 곳입니다.

prop-types

　만약 구성 요소의 코드에 Props의 형태가 써 있고, 그 형태대로 데이터가 전달되고 있는지를 체크 해주는기구가 있으면 별도 사양서를 준비하고 규격대로 Props가 건네 있는지 체크하는 등 끈기가 필요한 작업을 할 필요가 없습니다.

　이러한 과제를 해결하기 위해 Facebook을 준비하고있는 것이 이번 소개하는 「prop-types '라는 라이브러리입니다. 이것은 Props의 형태 정보를 JavaScript 코드로 정의하고 구성 요소에 부가 정보로 추가하면 Props에 전달 된 데이터를 확인 할 수있게된다 도구입니다.

　도입하려면 목록 2의 명령을 실행합니다.

목록 2 prop-types를 도입하는 명령

$ npm install prop - types

　이후 본 문서에서는 라이브러리 이름을 "prop-types"라이브러리에서 가져온 모듈 이름을 "PropTypes"구성 요소 정의하는 속성 이름 (다음에 소개합니다)를 "propTypes '로 표기합니다.

구성 요소에 대한 정의

　이미지를 잡아달라고하기 위하여 위의 List 구성 요소에 대한 형식 정보를 부가 한 경우의 샘플을 소개합니다 (목록 3).

목록 3 List 구성 요소의 propTypes 속성의 정의

import PropTypes from 'prop-types' ;   

class List extends Component { 
  render () { ... } }       


List . propTypes = { // (1) // posts 속성은 배열 인 
  posts : PropTypes . arrayOf ( PropTypes . shape ({ // 각 속성의 형식을 명시 // name은 문자열의 필수 
      name : PropTypes . string . isRequired , // age 배열 중 어느 하나에 일치하는 필수 항목 
      age : PropTypes . oneOf ( "teen" , "twenties" , "thirties" , "fourties" , "fifties" ). isRequired  
   
     
       
       
        
        
        
        
        
      , // body는 문자열의 필수 
      body : PropTypes . string . isRequired
     }) ) };
       
  

　prop-types 라이브러리를 이용한 형태 정보는 (1)과 같이 구성 요소에 "propTypes"라는 개체 형식 속성을 추가하는 것으로 정의됩니다. 세세한 기법에 대해서는 후술하지만, 목록 3의 샘플을 바라 보면 'posts'가 어떤 구조를 가진 데이터인지 조금 알게되는 것이 아닐까요.

체크기구

　구성 요소 유형 정보를 정의 할 것으로 형태를 인식 할 수있게되었습니다 만, prop-types 라이브러리의 본래 기능은 데이터의 체크입니다. propTypes 속성에 정의 된 형식과 다른 구조의 데이터가 전달 된 경우 콘솔에 오류 로그가 표시됩니다.

　예를 들어, 방금 propTypes 속성을 정의하는 List 구성 요소에 body를 숫자 형식으로 객체를 전달하자. body는 문자열로 정의했기 때문에 어떤 반응이있을 것입니다.

목록 4 body의 형식이 잘못된 데이터를 전달 본다

<List posts = {[ 
    { name : "taro" , age : "teen" , body : 0}
  
  ]} />

　이 코드를 실행하면 콘솔은 그림 1과 같은 오류 메시지가 표시됩니다.

그림 1 prop-types 오류 메시지

　숫자가 아닌 문자열을 기대하고 있다고 경고했습니다. 구성 요소의 사용을 잘못한 경우에는 이렇게 경고를받을 수 있으므로 디버깅시 매우 유용합니다.

　그러나 이것은 어디 까지나 경고입니다. 이번 경우에도 0을 텍스트로 문제없이 표시되었습니다. 응용 프로그램을 강제 종료시키는 형태로 오류의 존재를 인식시키는 유형의 도구가 아닌 오류 로그를 모니터링하여 디버깅을하기 쉬워하는 도구로 인식합니다.

[칼럼] React.PropTypes

　인터넷에서 React에 대한 오래된 문헌을 살펴보면 다음과 같은 호출을하지 샘플이 발생 할 수 있습니다.

import { Component , PropTypes } from 'react' ;      

　사실 React 버전 15 계까지 PropTypes 모듈은 React의 일부로 볼 수있었습니다. 2017 년 여름, React 버전 16.0.0이 타이밍에서 여러가지 사정에서 독립적 인 라이브러리로 제공되는 것이며, 현재에 이르고있다. 그래서, 이번에 소개하는 prop-types 라이브러리의 버전은 독립 당시의 React 버전 인 15.6.0이 그대로 사용되고있는 것입니다.

　2017 년 이전의 문헌을 검색 할 때, 이러한 사정에 유의하십시오.