React와 Typescript를 함께 사용하기 : 간단한 6개의 팁

원문 보기

6 simple tips for working with React and TypeScript

TypeScript로 React 애플리케이션을 구축할 때 유용한 몇 가지 일반적인 팁, 제안 및 기술을 다룰 것입니다.

Use utility types (유틸리티 타입)

TypeScript로 작업할 때 기존 타입 위에 새 타입을 생성하려는 경우가 많습니다.

이 방법으로 새 ​​타입을 만들면 몇 가지 이점이 있습니다.

• DRY 원칙과의 일관성 유지. 기존 타입을 재사용하여 코드의 반복을 줄입니다.
• 타입을 동기화합니다. 기본 타입을 변경하면 모든 하위 타입도 변경 사항을 적용합니다.

새 타입을 만드는 한 가지 방법은 TypeScript 유틸리티 타입을 사용하는 것입니다.

유틸리티 타입은 사용자 정의 타입을 작성할 때 더 복잡한 예외 사례를 해결하는 데 도움이 될 수 있습니다.

overview of utility types

Typescript: Five most useful utility types for React

제네릭을 사용하여 재사용 가능한 컴포넌트 만들기

React.Component 타입을 사용하여 TypeScript에서 재사용 가능한 제네릭 React 컴포넌트를 작성할 수 있습니다.

React.Component는 타입 파라미터를 허용하는 컴포넌트를 만드는 데 사용할 수 있는

제네릭 파라미터화된 타입입니다.

이 유형으로 제네릭 리스트 컴포넌트를 만드는 방법을 살펴보겠습니다.

위의 예에서 동적 타입 T를 입력으로 사용하는 제네릭 리스트 컴포넌트를 만들었습니다.

컴포넌트가 items props에 대해 모든 타입의 데이터를 허용할 수 있음을 의미합니다.

map 함수를 사용하여 배열의 각 item을 순회하며 itemRenderer 함수 prop을 사용하여 렌더링합니다.

 

이러한 방식으로 제네릭 컴포넌트를 생성하면 여러 타입에 적용되는 코드를 작성하고 코드 중복을 줄일 수 있습니다.

한번 함수형 컴포넌트로 바꿔서 구현해 보세요

React.CSSProperties 사용하기

React.CSSProperties는 CSS-in-JS 객체에 대한 React의 스타일 정보를 나타내는 타입입니다.

이 타입은 스타일 prop을 컴포넌트에 전달하고 해당 prop이 React에서 지원하는 방식으로 사용되는지 확인하는 데 유용합니다.

 

React.HTMLProps를 사용하여 HTML 요소 확장

React.HTMLProps를 사용하여 기본 HTML 요소의 기능을 확장하는 사용자 정의 요소를 만들 수 있습니다.

 React.HTMLProps를 사용하여 props 타입을 구성하는 Input이라는 사용자 정의 React 요소를 만들었습니다.

그런 다음 about, accept 및 기타 HTML 소품을 사용하여 동작을 정의합니다.

상수 대신 타입 사용

다음 구문을 사용하여 프로젝트에서 전역 상수를 만드는 것이 일반적입니다.

이와 같은 구문은 Redux/Context action을 만들 때 자주 보입니다.

그러나 보다 우아한 솔루션은 문자열 상수 대신 타입을 사용하는 것입니다.

오타를 방지하고 우리가 허용하는 것 이외의 variant(변형) 타입을 아무도 사용하지 않도록 할 수 있습니다.

또 다른 장점은 VSCode와 같은 IDE를 사용할 때 IntelliSense를 더 잘 지원한다는 것입니다.

변형을 자동 완성하고 코드에서 타입 검사를 받을 수 있습니다.

단축 앰비언트 모듈(shorthand ambient modules)을 사용하여 서드파티 타입 오류 해결

Ambient 선언은 TypeScript로 작성되지 않은 라이브러리의 API 모양을 설명하는 데 사용됩니다.

이들은 일반적으로 d.ts 파일에 정의됩니다.

타사 모듈에 대한 TypeScript 선언을 찾고 있지만 찾을 수 없는 경우,

고유한 타입을 생성하거나 단축 앰비언트 모듈을 사용하여 이 모듈에 대한 타입 검사를 끌 수 있습니다." 

declare module "hot-new-module";

결과적으로 TypeScript는 이 단축 모듈의 모든 가져오기에 모든 타입을 적용합니다.

참고

리액트 - 리덕스 스타일 가이드

GitHub - piotrwitek/react-redux-typescript-guide: The complete guide to static typing in "React & Redux" apps using TypeScript