[TS] TypeScript와 React 함께 사용하기

TypeScript + React 설치하기

npx create-react-app folder-name --template typescript

위 명령어를 통해 TypeScript와 React를 함께 사용할 수 있다
TypeScript 컴파일 설정과 tsconfig 파일 생성이 자동으로 실행되고,
.jsx 파일이 아닌 .tsx 파일을 생성한다

💡참고💡 create-react-app 공식문서

명령어를 입력 후 조금 기다리면

지정한 이름으로 폴더가 생성된다

프로젝트 실행하기

해당 폴더로 옮겨가서 npm start로 실행하면 ↑요런창↑이 나타난다

특징

1. 컴파일링

App.tsx 에서 코드를 수정하고 저장하면 tsc 명령어 없이도 자동으로 컴파일링 된다
App.tsx에서 수정한 사항이 콘솔에 찍히는 것을 확인할 수 있다

2. 제네릭

.tsx에서 제네릭 사용시 주의사항이 있다

일반함수 func1에서는 문제가 없지만
화살표함수 func2에서 제네릭을 작성하니 오류가 나타난다

해결방안은 제네릭 타입 뒤에 콤마(,)를 붙여주는 것!
오류가 사라진 것을 확인할 수 있다

본격적으로 시작하기 전에

src 폴더 내에 App.test.tsx logo.svg setupTests.ts
이 3가지 항목은 크게 필요가 없기 때문에 제거하고

본문 내용도 삭제하고 시작하면 된다!

컴포넌트의 반환 타입

src폴더 내에 components 폴더를 만들고 이곳에서 컴포넌트 작업을 해보자

Basic.tsx 파일을 생성하여 기존에 React를 사용하던대로 코드를 작성하였다
하지만 이 파일은 jsx파일이 아닌 tsx파일로 TypeScript가 결합된 파일이라는 것을 인지해야한다

Basic 함수에 마우스를 올려보면 이 함수가 반환하는 타입이 나타난다
HTML 태그를 반환하고 있기 때문에 JSX.Element를 반환하는 것을 알 수 있다

숫자나 문자열도 마찬가지 이다

TypeScript가 타입을 추론한다는 것을 다시 한 번 확인!

만약 이렇게 JSX.Element라고 반환타입을 지정해두고
return 타입에 다른걸 적는다면?

기존의 TypeScript 사용법대로 오류가 나는 것을 확인할 수 있다

이 컴포넌트를 메인 컴포넌트에서 사용하는 방법은
React에서 사용하던 방법과 동일하다

import로 해당 컴포넌트를 불러오고
본문에 해당 컴포넌트를 작성해주면

요렇게 브라우저에 잘 나타난다! 뿅!