[typeScript] React typescript 실행 과정

글의 목적

typeScript가 어떤 과정을 거쳐 js 코드가 되는지 알아본다.

 

 

트랜스파일링

JSX코드는 브라우저에서 바로 실행할 수 없다. typeScript 코드도 마찬가지이다.

그러면 JSX코드나 ts 코드 ( TSX )를 js 코드로 바꾸어주어야 하는데 이 과정이 트랜스파일링 과정이다.

 

이때 TSX 코드를 브라우저가 해석할 수 있는 js코드로 바꾸는 방법은 두 가지가 있다. 

 

1. TSX 코드를 바로 js 코드로 번역 

2. TSX 코드를 JSX 코드로 번역하고 번들러가 JSX 코드를 js 코드로 번역 

 

 

tsconfig.json

 

이 파일의 jsx 옵션이 위의 방식을 결정한다. 

react나 react-jsx의 경우 1번 방법으로 번역하고 preserve의 경우 2번 방법으로 번역한다.

vite, react-create-app, node.js 모두 각자 방법이 다르므로 프로젝트를 시작하면 자동으로 tsconfig 파일에 설정되어있다. 

나는 vite 프로젝트를 만들어서 "react" 옵션이 들어가 있다.

 

 

번들러는 다음 포스팅에 자세히 설명되어 있다.

https://kangee-mohum.tistory.com/46

[Bundler] 번들번들번들러에 대해 알아보쟈