분류 Reactjs

React.js : PropTypes에서 TypeScript로 전환

컨텐츠 정보

  • 조회 301 (작성일 )

본문

React.js 개발자이고 TypeScript를 사용하지 않는 경우 이 기사가 적합합니다!


? Props은 의사 소통 채널입니다 


컴포넌트는 React 라이브러리의 핵심 기능입니다. 그것은 우리에게 우려의 진정한 분리를 허용합니다. 완전한 UI를 구축하려면 몇 가지가 필요하므로 서로 소통해야 합니다.


한 컴포넌트에서 다른 컴포넌트로 정보를 전달하는 쉬운 방법은 props입니다.


import React from "react";
import { Picture } from "./Picture";

export const Profile = ({ user }) => (
  <div>
    <Picture source={user.photo} altText={user.name} type="xlarge" />
    <h1>{user.name}</h1>
    <p>{user.bio}</p>
  </div>
);


일반적인 패턴입니다. 컴포넌트는 props에서 데이터를 가져오고 다른 컴포넌트를 사용하고 props을 제공합니다. 여기에서 Profile 구성 요소는 Picture 구성 요소를 사용합니다. 우리는 프로필에서 사진으로 정보를 제공하기 위해 props을 사용합니다. 이는 커뮤니케이션 채널이며 개발자는 이를 그렇게 취급해야 합니다.


그렇다면 훌륭한 커뮤니케이션 채널은 무엇입니까? 그것은 의사 소통 능력이 아니라 주변의 UX 기능입니다.


Signal을 사용하여 친구와 이야기합니다. 물론 메시지를 주고 받을 수 있지만 이 문제에 대해 어떤 기능이 있습니까? 내 메시지를 읽었는지 확인하기 위해 영수증을 읽었습니다. 나는 내 메시지를 편집 할 가능성이 없다. React props는 어떻습니까? 구성 요소에 값을 제공 할 수 있습니다. 하지만 이 문제에 대해 어떤 개발자 경험이 있습니까? 타입 체크!


유형은 무언가 잘못되어 보일 때 경고 할 수 있으므로 DX를 개선 할 수 있습니다. props에 유형 검사를 추가하는 표준 방법은 prop-types 라이브러리를 사용하는 것입니다.


import PropTypes from "prop-types";
import React from "react";

const getSize = (type) => {
  switch (type) {
    case "large":
      return { width: 300, height: 200 };

    case "medium":
      return { width: 150, height: 100 };

    case "small":
      return { width: 90, height: 60 };
  }
};

export const Picture = ({ altText = "", source, type = "small" }) => {
  const { width, height } = getSize(type);
  return <img alt={altText} src={source} width={width} height={height} />;
};

Picture.propTypes = {
  alt: PropTypes.string,
  source: PropTypes.string.isRequired,
  type: PropTypes.oneOf(["large", "medium", "small"]).isRequired,
};


달콤하게도, 우리는 prop이 필요한지 아닌지, 그것이 문자열인지 다른 유형인지를 지정하거나 가능한 값의 엄격한 목록을 제공 할 수 있기 때문에 더 효과적으로 의사 소통 할 수 있습니다! 우리의 경우, 다음은 프로필 구성 요소를 표시 할 때 브라우저가 알려주는 내용입니다.


error.png 


오, 좋은 캐치, 감사합니다 PropTypes! 이제 유형을 확인하는 이 아이디어를 더 많이 취하고 모든 코드를 확인할 수 있다고 상상해보십시오. ?


? 여기에 TypeScript가 있습니다. 


React v15.5 이전에는 prop-types 라이브러리가 React에 포함되었습니다. React 팀은 개발자가 Flow 또는 TypeScript와 같은 다른 타이핑 시스템을 사용할 수 있도록 코어에서 라이브러리를 추출하기 위해 unopiniated 라이브러리를 갖는 철학에 따라 선택했습니다. 후자를 시도해 봅시다.


TypeScript의 진입 장벽 중 하나는 도구를 사용하기 전에 설치하고 구성해야 한다는 것입니다. 실이 소품 유형을 추가하는 것만 큼 간단하지는 않습니다. 제 생각에 TypeScript를 배우는 가장 좋은 방법은 이 단계를 완전히 건너 뛰는 것입니다. CRA로 새로운 React 앱을 만들고 해킹을 시작하세요!


yarn create react-app my-project --template typescript

끝난. 이제 Picture Component에서 PropTypes에서 TypeScript로 전환 해 보겠습니다.


import React, { FunctionComponent } from "react";

// We can create an TypeScript interface
// to describe our components props
interface PictureProps {
  altText?: string;
  source: string;
  type: Size;
}

// We can use all native type such as string, number, boolean
// But we can also create our own type
type Size = "large" | "medium" | "small";

const getSize = (type: Size) => {
  switch (type) {
    case "large":
      return { width: 300, height: 200 };

    case "medium":
      return { width: 150, height: 100 };

    case "small":
      return { width: 90, height: 60 };
  }
};

export const Picture: FunctionComponent = ({
  altText = "",
  source,
  type = "small",
}) => {
  const { width, height } = getSize(type);
  return <img alt={altText} src={source} width={width} height={height} />;
};


TypeScript의 마법은 우리가 제공하는 유형을 엄격하게 적용하지 않는다는 것입니다. 또한 정보를 추론하기 위해 코드를 분석합니다.


getSize() 함수를 분석하여 반환 유형이 {width : number; 높이 : 숫자}. 나쁘지 않아요?


TypeScript는 또한 약간의 추가 기능을 제공합니다. 코딩하는 동안 코드 편집기에서 바로 수행 할 수 있습니다. prop-types의 경우처럼 힌트를 얻기 위해 브라우저에서 실행될 때까지 기다릴 필요가 없습니다.


내 VS 코드에 표시되는 내용은 다음과 같습니다.


getSize.png 


여기에 있는 동안 Profile 구성 요소를 TypeScript로 전환 해 보겠습니다.


import React, { FunctionComponent } from "react";
import { Picture } from "./Picture";

interface User {
  name: string;
  bio: string;
  photo: string;
}

interface ProfileProps {
  user: User;
}

export const Profile: FunctionComponent = ({ user }) => (
<div>
  <Picture source={user.photo} altText={user.name} type="xlarge" />
  <h1>{user.name}</h1>
  <p>{user.bio}</p>
</div>
);


여기에서도 코드에 문제가 있다는 경고가 런타임에 표시 될 때까지 기다릴 필요가 없습니다. 유형 검사는 컴파일 시간에 직접 수행됩니다. 즉, 코드 편집기에서 직접 TypeScript가 발견 한 오류를 경고하는 ESLint가 있기 때문에 create-react-app을 사용할 때 즉시 말합니다.


type-error.png 


맞습니다. "xlarge"는 우리가 생성 한 크기 유형에 정의 된 값 목록에 없습니다. 감사합니다 TypeScript!


오, TypeScript에게 가능한 값을 알려주시겠습니까?


possible-values.png 


멋지지 않나요? ?


정말 멋진 점은 PropTypes와 달리 TypeScript가 컴포넌트 소품에만 국한되지 않는다는 것입니다. React 컴포넌트와 관련이 없는 것을 포함하여 모든 JavaScript 코드에 대해 경고를 받을 수 있습니다. TypeScript는 NodeJS에서 매력처럼 작동하기 때문에 프론트 엔드와 완전히 관련이 없는 것도 포함합니다.


<Picture> 컴포넌트에서 사용하는 getSize() 함수는 단순한 JavaScript 함수입니다. 그러나 매개 변수를 입력 했으므로 TypeScript의 기능을 활용할 수도 있습니다.


예를 들어 switch 문에 케이스를 추가하려면 다음을 수행합니다.


getSizeError.png 


이제 우리는 코드를 확신 할 수 있습니다. 어딘가에 불일치가 있다면 TypeScript는 우리 코 바로 아래에 있었지만 여전히 놓친 실수를 지적하면서 우리에게 소리 칠 것입니다.


더 깊이 들어가고 싶다면 다음을 확인할 수 있습니다.


? 최종 생각 


거짓말을 하지 않겠습니다. TypeScript를 사용한 여정은 쉽지 않으며 학습 곡선이 때때로 어려울 수 있습니다. 하지만 그만한 가치가 있다고 생각합니다.


마이크로 소프트는 자바 스크립트 진화에 반응하는 오픈 소스 도구를 제안함으로써 훌륭한 성과를 거두었습니다. JS 생태계는 이 새로운 준 표준을 채택했으며, React의 FunctionComponent로 예제에서 했던 것처럼 코드를 입력 할 수 있도록 많은 라이브러리가 TypeScript와 호환됩니다.


몇 년 전 TypeScript에 들어가는 것은 도박이었습니다. 2021 년에는 당연한 선택입니다. 오늘 사용하세요!


https://blog.reactstory.com/switch-from-prop-types-to-typescript