지금까지 TS에 대한 기본적이 내용을 살펴보았으니, 실제로 React에 TS를 적용시켜보자.
아래의 두 가지 방법 중에 상황에 알맞게 선택하면 되겠다.
- 기존 프로젝트에
TS추가 - 새로운 프로젝트를 생성하며
TS추가
각 방법의 자세한 내용은 Create React App 공식문서를 통해 알아볼 수 있다.
이번 글에서는 TS를 기반으로 한 새로운 React 프로젝트를 만드는 법을 알아보겠다.
create-react-app(CRA)을 사용하여 TS를 추가해보자.
npx create-react-app 프로젝트명 --template typescriptcreate-react-app 명령어와 함께 프로젝트명, 그리고 --template typescript를 적어주자.
특정 template을 사용하여 TS 프로젝트를 생성하는 것이다.
프로젝트 생성이 끝났다면 잠시 src 폴더의 파일을 둘러보도록 하자.
위처럼 파일의 확장자가 .js가 아닌 .tsx인 것이 눈에 띈다. 이것은 우리가 TS를 사용하고 있음을 나타낸다.
확장자가 정확히 .js가 아니라 .tsx인 이유는 TS안에서 JSX문법을 사용하기 때문이다.
눈에 보이진 않지만 하나 더 달라진 점이 있다.
기존과 비교하여 dev server는 한 가지 작업을 더 수행하게 되었다. 바로 작성한 TS 코드를 JS 코드로 컴파일하여 최적화 하는 것이다.
일반적인 React 프로젝트의 dev server는 단순히JS 코드를 받아 파일들을 하나로 묶는(bundle) 작업 및 최적화를 진행하였다. TS가 추가된 React 프로젝트에서는 build와 동시에 자동적으로 코드를 컴파일하게 된다.
이번에는 package.json 파일을 살펴보도록 하자.
대부분 기존의 dependencies와 내용이 비슷하지만 몇 가지 추가된 것이 있는 듯 하다. typescript와 아래와 같은 @types 패키지가 보인다.
@types 패키지는 JS 라이브러리(react, react-dom를 지칭)와 TS 프로젝트 사이에서 번역기 같은 역할을 한다.
react와 react-dom은 JS만을 사용한다. 하지만 우리는 이러한 React 프로젝트와 함께 TS를 사용하려 한다. JS가 TS의 언어를 알아들을 수 있도록 변환이 필요하다는 것이다.
(type 표기 기능을 JS 라이브러리에 추가해 주는 느낌)
이러한 역할을 하는 것이 @types/react와 @types/react-dom인 것이다..!
다음 글에서부턴 실제 코드를 작성해보도록 하겠다.
