0727-TIL-리액트 타입스크립트로 작성하기

리액트 프로젝트 세팅하기

• 프로젝트 생성

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

• 프로젝트 실행

yarn start

자식 컴포넌트로 props 내려주기

• 내려받는 props의 타입을 지정해줘야 함 
• 타입을 지정해주지 않을 경우 타입스크립트의 IntrinsicAttributes 에러 발생 가능

 

props를 인자로 받는 부분에 인라인으로 하나씩 작성할 경우

• props가 한 개일 때

const TodoList = ({ todos}: { todos: Todo[]; }) => {

• props가 여러개일 때

const TodoList = ({ todos, isDone, setTodos }: { todos: Todo[]; isDone: boolean; setTodos: any }) => {

 

props에 대한 interface를 미리 지정할 경우

내려 받은 props 뒤에 타입으로 미리 지정한 interface 이름을 적으면 된다!

 

interface ButtonProps {
  type?: "button" | "submit";
  children: React.ReactNode;
  styleType: StyleType;
  disabled?: boolean;
  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
}

const Button = ({ type = "button", children, styleType, disabled, onClick }: ButtonProps) => {

 

• children의 타입은 React.ReactNode
• 만약 없을 수도 있는 props라면 ?: 로 타입 지정
• e의 타입은 <form onSubmit={e=>{}}>...</form> 와 같이 작성하고 e에 커서를 올리면 확인 가능
• void 타입은 함수의 리턴값이 없는 것을 의미함

export enum ~~

한 컴포넌트에서 정의한 상수값을 export해서 다른 컴포넌트에서 사용할 수 있다.

 

StyleType은 버튼 컴포넌트에서 버튼의 스타일을 확인하기 위해 만든 상수이다.

 

Button.tsx

export enum StyleType {
  FORM_SUBMIT = "FORM_SUBMIT",
  FORM_DELETE = "FORM_DELETE",
  FORM_SWITCH = "FORM_SWITCH",
}

 

Main.jsx

import Button, { StyleType } from "./Button";

<Button styleType={StyleType.FORM_SUBMIT}>추가하기</Button>

사용할 컴포넌트와 StyleType을 둘 다 import해온 후 사용하면 된다.

 

 

참고한 블로그

https://kong-dev.tistory.com/164

[Typescript/타입스크립트] declare 모듈 타입 & 전역 타입 typeRoots 와 paths

https://velog.io/@ovogmap/React-Typescript-2

React + Typescript 프롭스 타입 정의 하기

https://cpro95.tistory.com/656

타입스크립트 React props 전달하는 방법 및 IntrinsicAttributes 오류 해결

https://react.vlpt.us/using-typescript/02-ts-react-basic.html

2. 리액트 컴포넌트 타입스크립트로 작성하기 · GitBook