PropTypes로 React 도구의 유형 오류를 잊는 방법

작성자Nwose Lotanna Victor
React를 사용하여 코드를 작성하거나 유지 관리하고 있습니까?그리고 응용 프로그램을 구축할 때와 응용 프로그램을 구축한 후에 끊임없이 발생하는 디버깅을 익혀야 한다.만약 네가 디버깅 시간을 대폭 줄이고 싶다면, 이 글은 너를 위해 준비한 것이다.본고에서 우리는 React의 prop 유형을 어떻게 사용하여 디버깅 과정을 가속화시키는지, 그것들이 무엇인지, 그것들과 TypeScript의 관계, 그리고 그것들이 실제 예시와 어떻게 사용하는지 연구할 것이다.

아이템 유형

React 도구 유형은 React가 지원하는 라이브러리입니다. 구성 요소의 도구 유형을 정의할 수 있습니다.원형은 우리가 하나의 구성 요소에서 다른 구성 요소로 전달되거나 한 요소에서 다른 요소로 전달되는 데이터를 검증하거나 확보하는 것이다. 이것은 우리가 전달하고자 하는 정확한 데이터 유형의 간단한 방법이다.React에서 데이터를 전달하는 방법 중 하나는 속성을 통과하는 것입니다. 따라서 본고에서 보듯이 이러한 유형을 검사하는 것이 중요합니다.
React는 JavaScript 프레임워크이기 때문에 동적 유형인 것을 알고 있기 때문에 JavaScript의 속성 유형은 실행할 때 결정됩니다.유형 검사는 TypeScript가 언어로 잘 알려진 것이기 때문에 React-prop 유형과의 관계를 알고 싶을 수도 있습니다.
응용 프로그램이 커지면서 더 많은 오류가 발생할 가능성도 커지고 유형 검사를 통해 많은 오류를 쉽게 포착할 수 있다는 것을 아는 것은 좋은 일이다.Proptypes를 사용하면 코드 라이브러리를 작성하거나 읽거나 유지보수하든지 간에 구성 요소는 예측할 수 있습니다.

그것과 타자 스크립트의 관계

TypeScript는 JavaScript의 정적 유형 버전으로 동적 유형 문제를 해결한다. 즉, 속성 유형을 알거나 강제로 실행할 뿐만 아니라 JavaScript의 거의 모든 다른 내용의 유형도 알아야 한다.그러나 TypeScript를 사용하면 컴파일할 때 유형이 확인되므로 코드를 작성할 때 경고가 실시간으로 표시됩니다.Proptypes에 대해 이러한 검사는 실행할 때 진행되기 때문에 주로 구성 요소의 상호작용과 디버깅에 주목한다.React에서 prop 형식을 사용하면 TypeScript 체험을 할 수 있고 TypeScript를 사용할 필요가 없습니다.

문제.

이 흥미로운 용례는 경고를 보내지 않고 React에서 컴파일하는 것입니다.디버깅을 할 때 눈치채기 어려울 뿐만 아니라, 대부분의 경우, 응용 프로그램 사용자들이 먼저 이런 일에 주의를 기울일 수 있기 때문에, 이것은 매우 비쌀 수도 있다.

우리는 무엇을 건설할 것인가

만약 도구 종류가 없다면, 당신의 구성 요소는 어떻게 보입니까?다음 프레젠테이션을 보도록 하겠습니다.

이것은 간단한 자동차 목록입니다. 카드 형식으로 표시됩니다. 만약 당신이 처음부터 이 글을 따랐다면, "propstest"프로젝트를 만들었을 것입니다. 우리는 이 강좌에서 그것을 사용할 것입니다.
선택한 폴더로 이동하여 VS 코드에서 열고 터미널에서 다음 명령을 실행합니다.

npx create-react-app propstest

소스 폴더에 구성 요소 폴더를 생성한 다음 기능 구성 요소 파일을 생성하여 호출Car.js하고 다음 코드 블록을 복사합니다.

import React from "react"
const Car = (prop) => {
    return ( <div className = "container responsive" >
        <div className = "car" >
          <h2 > This {prop.brand} {prop.model
          } < /h2> 
          <h4 > has a millage of {prop.milage} < /h4> 
          <h4 > It is an electric vehicle - {prop.isElectric} < /h4> 
          <ul > {
              prop.owners.map((owner, key) => {
                  return <li key = {key} > {owner} < /li>;
              })
          } 
          </ul> 
          </div> 
        </div>
    );
};
export default Car;

이것은 제목과 목록이 있는 자동차 템플릿을 보여주고 내보내는 간단한 기능 구성 요소입니다.소스 폴더에서 app component(app.js) 파일을 볼 수 있으며 다음 코드 블록을 app.js 파일로 복사합니다.

import './App.css';
import Car from './Components/Car'

function App() {
    return ( <div className = "App" >
        <Car brand = "Tesla"
          model = "CyberTruck"
          milage = {5000}
          isElectric = {"true"}
          owners = {["Lotanna"]}
        /> 
        <Car brand = "Ford"
          model = "Explorer"
          milage = {8000}
          isElectric = {"false"}
          owners = {["Runor", "Elijah"]}
        /> 
        <Car brand = "Benz"
          model = "CLA250"
          milage = {7500}
          isElectric = {"false"}
          owners = {["Gilbert", "Herbert", "Frank", "Mazior"]}
        /> 
        <Car brand = "Toyota"
          model = "Camry"
          milage = {3000}
          isElectric = {"false"}
          owners = {["Ebuka", "Ikenna", "Ekene"]}
        /> 
        </div >
    );
}
export default App;

여기에 정의된 템플릿을 도입하고 React에 우리의 미리 정의된 속성을 네 번 렌더링하라고 알려 줍니다.이런 속성은 자동차 브랜드, 차종, 거리와 차주를 포함한다.dev 서버 명령을 실행할 때:

npm start

모든 분산된 정보를 볼 수 있고, CSS 규칙을 추가해서 응용 프로그램으로 내비게이션을 할 수 있습니다.css 파일 및 다음 스타일을 복사합니다.

.App {
    text-align: center;
}

.container {
    position: relative;
}

ul {
    list-style-type: none;
    text-align: center;
}

.car {
    top: 50%;
    text-align: center;
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 600px;
    height: 250px;
    margin-left: 25%;
    margin-bottom: 15px;
}

dev 서버 명령을 다시 실행합니다.
http: //localhost:3000/ 브라우저에서 위의 설명과 똑같아 보이는 것을 알 수 있습니다.
이제 응용 프로그램 구성 요소 파일에 들어가서 테슬라 문자열을 숫자로 변경할 수 있습니다.
예를 들면 5000과 토끼의 밀지,
프로그램이 오류나 경고 없이 잘 작동하고 있습니다.

디버그 과정에서 이러한 상황을 포착하기 어려울 수 있습니다. 이것은 인위적인 오류, 직접 사용자가 입력하거나 다른 구성 요소나 API에서 온 데이터 때문일 수 있습니다. 특히 코드 라이브러리의 작성자가 아니라면.소유자단을 '로타나' 를 포함하는 그룹에서 문자열만 포함하는 그룹으로 변경할 수 있습니다.

프로그램이 컴파일할 때 붕괴되지만 유형 때문이 아닙니다. 소유자에게 맵 함수를 제공했기 때문입니다. 맵은 목록 (우리의 예는 그룹) 에서만 작동합니다. ## 해결 방안: 도구 유형 이 문제의 좋은 해결 방안은 당신이 사용하고자 하는 모든 도구의 유형을 정의하는 것입니다.기능 어셈블리에서 도구 유형에 대한 구문은 다음과 같습니다.

import PropTypes from 'prop-types'

function HelloWorldComponent( {name}) {
    return (<div>Hello, {name} </div>)
}

HelloWorldComponent.propTypes = {
    name: PropTypes.string
}

export default HelloWorldComponent

응용 프로그램에서 어떻게 작동하는지 살펴보고 먼저 다음 명령을 사용하여 프로젝트에 도구 유형 패키지를 설치합니다.

npm install proptypes

유형을 정의할 구성 요소에서 설치된 도구 유형을 가져옵니다Car.js 파일에서 다음을 수행합니다.

import React from "react"
import PropTypes from "prop-types"
const Car = (prop) => {
    return ( <
        div className = "container responsive" >
        <div className = "car" >
          <h2> This {prop.brand } { prop.model } < /h2> 
          <h4> has a millage of { prop.milage } < /h4> 
          <h4 > It is an electric vehicle - { prop.isElectric } </h4> 
          <ul> {
              prop.owners.map((owner, key) => {
                  return <li key = {key} > {owner} < /li>;
              })
          } 
          </ul> 
          </div> 
        </div>
    );
};
Car.propTypes = {
    brand: PropTypes.string,
    model: PropTypes.string,
    milage: PropTypes.number,
    isElectric: PropTypes.string,
    owners: PropTypes.arrayOf(PropTypes.node)
}
export default Car;

Notice the prop types being defined before the export of the component, that is very important because if you export before defining the prop types, it would not work in the dev server.

이것은 나로 하여금 많은 폼 검증 프로그램 라이브러리를 떠올리게 했다. 그것들도 기본적으로 이렇게 구성된 것이다.우리는 이 자동차 부품에 몇 가지 도구 유형을 추가했는데, 그 중 일부는 다음과 같다.

Proptype.문자열: 필요한 도구 종류를 정의합니다. 여기 있는 도구 종류는 문자열입니다.

Proptype.번호: 필요한 도구 종류, 즉 유형 번호를 정의합니다.

Proptype.array Of: 이것은 여기에 필요한 도구 종류를 정의합니다. 이것은 그룹 종류입니다. 하위 형식을 정확하게 지정할 수 있습니다.

Proptype.노드: UI에 표시할 수 있는 모든 내용의 유형을 정의합니다.숫자, 문자열, 요소, 그룹, 심지어 세션까지 포함한다.

documentation here에서 다른 유형의 내용을 읽을 수 있습니다.

테스트 아이템 유형

현재 dev 서버에서 이 프로그램을 실행하면 모든 것이 잘 실행되는 것을 볼 수 있습니다. 그러나 Tesla를 숫자로 바꾸려고 시도할 때 이 프로그램은 실행 중이지만, 이번에는 컨트롤러에 경고를 표시합니다.

이 경고들은 매우 묘사적이어서, 일단 그것을 읽으면, 무슨 문제가 생겼는지, 그리고 무엇을 복원해야 하는지 확실히 알게 될 것이다.

더 많은 용례: 예시 중의 하나

더욱 흥미로운 것은 도구 중 하나에서 필요한 정확한 값을 지정할 수 있기 때문에 데이터 원본이 어디에 있든지 규격과 일치하지 않으면 경고를 받을 수 있습니다.자동차 어셈블리의 정확한 값을 다음과 같이 정의합니다.

import React from "react"
import PropTypes from "prop-types"
const Car = (prop) => {
    return ( <div className = "container responsive" >
        <div className = "car" >
          <h2 > This { prop.brand } { prop.model } < /h2> 
          <h4 > has a millage of { prop.milage } < /h4> 
          <h4 > It is an electric vehicle - { prop.isElectric } < /h4> 
          <ul> { prop.owners.map((owner, key) => {
                  return <li key = { key } > { owner } < /li>;
              })
          } 
          </ul> 
          </div> 
        </div>
    );
};
Car.propTypes = {
    brand: PropTypes.oneOf(['Ford', 'Benz', 'Toyota']),
    model: PropTypes.string,
    milage: PropTypes.number,
    isElectric: PropTypes.string,
    owners: PropTypes.arrayOf(PropTypes.node)
}
export default Car;

우리가 필요한 정확한 값을 지정했기 때문에 테슬라를 일부러 무시했기 때문에 우리가 프로그램을 다시 실행할 때 우리가 받은 경고는 다음과 같다.

클래스 구성 요소의 아이템 유형

도구 유형도 React 클래스 구성 요소에 적용되므로 클래스 구성 요소를 신속하게 생성할 수 있습니다.components 폴더를 열고 새 component 파일을 만들고 Sample.js를 호출하고 다음 코드 블록을 복사합니다.

import React from "react"
import PropTypes from 'prop-types';
class Greeting extends React.Component {
    render() {
        return ( <h1 > Hello, { this.props.brand } < /h1>
        );
    }
}
Greeting.propTypes = {
    brand: PropTypes.string
};
export default Greeting;

app 구성 요소 파일(app.js)에서 인사말을 가져오고 템플릿을 추가하면 다음과 같습니다.

import './App.css';
import Car from './Components/Car'
import Greeting from './Components/Sample'

function App() {
    return ( <
        div className = "App" >
        <Greeting brand = "Reader" />
        <Car brand = { 4555 }
          model = "CyberTruck"
          milage = { 5000 }
          isElectric = { "true" }
          owners = { ["Lotanna"] }
        /> 
        <Car brand = "Ford"
          model = "Explorer"
          milage = { 8000 }
          isElectric = { "false" }
          owners = { ["Runor", "Elijah", 3] }
        /> 
        <Car brand = "Benz"
          model = "CLA250"
          milage = {7500}
          isElectric = { "false" }
          owners = { ["Gilbert", "Herbert", "Frank", "Mazior"] }
        /> 
        <Car brand = "Toyota"
          model = "Camry"
          milage = { 3000 }
          isElectric = { "false" }
          owners = { ["Ebuka", "Ikenna", "Ekene"] }
        /> 
        < /div >
    );
}
export default App;

dev 서버에서 실행하면 다음과 같이 표시됩니다.

생산 응용의 관찰성

생산 환경에서 React 애플리케이션을 디버깅하는 것은 매우 도전적이고 시간도 많이 걸릴 수 있습니다.Asayer는 전방 모니터링 도구로 사용자가 한 모든 것을 재방송하고 응용 프로그램의 행위와 모든 문제의 표현 방식을 표시할 수 있다.이것은 브라우저의 검사기를 열고 사용자의 어깨를 보는 것과 같다.

Asayer는 자신의 브라우저에서처럼 문제를 재현하여 근본적인 원인을 신속하게 찾을 수 있도록 도와줍니다.또한 페이지 로드 시간, 메모리 소모, 느린 네트워크 요청 등 관건적인 지표와 Redux 작업/상태를 포획하여 전단 성능을 감시한다.
즐거움 디버깅, 현대 전단 팀-Start monitoring your web app for free.

마무리

이 자습서에서는 React의 도구 유형, 해당 도구가 왜 중요한지, TypeScript와 어떻게 연관되어 있는지 알아봅니다.우리는 그것들이 어떻게 각종 예시와 업무 시범과 함께 사용하는지 소개했다.나는 네가 장래에 도구 유형을 채택하여 디버깅과 유지보수 코드를 더욱 쉽게 할 수 있기를 바란다.해커!