react + typescript

1. 설치하기

 

npx create-react-app .
npm i @types/react
통합적으로 npx create-react-app . --template typescript 설치가능

 

2. .ts 와 .tsx

.ts파일은 pure typescript 파일

.tsx 파일은 typescript의 react문법을 담아내기 위한 확장자(jsx+ typescript)

 

3. src 디렉토리

 

1) index.tsx

 

1:  메인 엔트리 파일
2:  React.Dom.render 수행
3:  pwa(프로그레시브 웹 앱 = HTML, CSS, JavaScript와 같은 웹 기술로 만드는 앱)를 위한 서비스 워커 등록 작업

 

 

2) index.css

글로벌 스타일 작성(프로그래밍적으로 제한되지 않음)

3) App.tsx

App 컴포넌트(샘플컴포넌트) : 컴포넌트 이름과 파일 이름을 맞추는 것이 관례

4) App.css

App 컴포넌트에서 쓰이는 스타일(암묵적 합의)

5) App.test.tsx

App 컴포넌트에 대한 테스트 작성파일

 

 

728x90

 

4. 리액트에 타입스크립트 정의

 

import React from "react";

interface 타입명 {
name: string;
mark: string;
optional?: string; // 선택적인 경우
onClick: (name: string) => void; // 함수를 props로 받을 경우
}

function 컴포넌트명({name, mark, optional, onClick}: 타입명) {
return <div>Hello, {name} {mark}</div>;


export default 컴포넌트명;

 

👀리액트+타입스크립트 깃허브 보기

 

+++ 보통은 타입 파일을 따로 만들어서 import하여 사용한다.

 

😊강의보면서 정리한 써니 깃허브 보기

😉타입스크립트 알아보기