[Develog] js와 jsx, ts와 tsx의 차이 / jsx를 js로 변환하는 과정

JS와 JSX의 차이

JavaScript(JS)와 JSX는 React 프로젝트에서 사용되는 두 가지 파일 형식이다.
JSX는 JavaScript XML의 약자로, React에서 UI를 구성하는 데 사용된다.

JS 파일은 일반적인 JavaScript 코드를 포함한다. 함수, 변수, 제어문 및 객체와 같은 JavaScript의 모든 구성 요소를 사용하여 구성된 파일이다. JS 파일은 React에서 UI를 구현하는 데 사용될 수 있지만,  JSX를 사용하는 것이 일반적이다.

JSX 파일은 HTML과 JavaScript를 혼합한 문서이다. JSX 파일에는 JavaScript 코드가 포함되어 있지만, HTML 요소와 유사한 구문을 사용하여 React에서 UI를 구성하는 데 사용된다. 예를 들어, JSX에서는 HTML 요소와 유사한 <div> 태그를 사용하여 React 컴포넌트를 작성할 수 있다.

JS와 JSX의 가장 큰 차이점은 JSX가 HTML과 유사한 구문을 사용하여 React UI를 작성하는 데 사용된다는 점이다. JSX는 JavaScript 코드를 포함하지만, HTML 요소와 유사한 구문을 사용하여 React에서 UI를 더 쉽게 작성할 수 있도록 도와준다. 

 

JSX를 JS로 변환하는 과정

브라우저는 JSX를 이해하지 못하기 때문에 JSX 코드를 JavaScript 코드로 변환해야 한다.
JSX를 JavaScript(JS)로 변환하는 과정은 바벨(Babel)과 같은 도구를 사용하여 수행된다.

Babel은 JSX를 JavaScript로 변환하는 데 사용되는 가장 일반적인 도구 중 하나이다.
Babel을 사용하면 JSX를 JavaScript 코드로 변환하고, 이 코드를 브라우저에서 실행할 수 있도록 컴파일할 수 있다.

Babel을 사용하여 JSX를 JavaScript로 변환하는 과정은 다음과 같다.

1. Babel 설치: 먼저 Babel을 설치해야 한다. npm을 사용하여 Babel과 JSX 변환에 필요한 모듈을 설치할 수 있다.

npm install --save-dev @babel/core @babel/cli @babel/preset-react

 

2. .babelrc 설정: 프로젝트 루트 디렉토리에 .babelrc 파일을 생성하고, 다음과 같이 설정한다.

{
  "presets": ["@babel/preset-react"]
}

 

3.JSX 변환: JSX 코드가 포함된 파일을 Babel CLI를 사용하여 JavaScript로 변환한다.

npx babel --watch src --out-dir dist --presets @babel/preset-react

위 명령어는 src 폴더의 파일을 변환하여 dist 폴더에 저장하고, 변환된 코드를 모니터링하면서 변경 사항이 있을 때마다 자동으로 다시 컴파일한다.

 

이렇게 Babel을 사용하여 JSX를 JavaScript로 변환하면, React에서 작성한 UI 구성 요소를 일반적인 JavaScript 코드로 컴파일하여 브라우저에서 실행할 수 있다.

 

TS와 TSX의 차이

• TS (TypeScript): TypeScript는 JavaScript를 기반으로 하며, 정적 타입 검사를 지원하는 JavaScript의 슈퍼셋이다. TS는 대개 .ts 파일 확장자를 사용한다.
• TSX (TypeScript with JSX): TSX는 React에서 UI를 작성하는 데 사용되는 TypeScript이다. React에서 JSX를 사용하는 경우 일반적으로 TSX 파일 확장자를 사용한다.

따라서, TS는 JavaScript 코드에서 타입 검사와 컴파일 타임 오류 검사를 수행하는 데 사용되고, TSX는 React에서 UI를 작성할 때 TypeScript를 사용하여 타입 검사를 수행하는 데 사용된다.

TS와 TSX 모두 TypeScript 언어의 문법을 사용하므로, TypeScript에서 사용할 수 있는 모든 기능과 타입 검사 기능을 TSX에서도 사용할 수 있다. TSX는 React 컴포넌트와 함께 사용되기 때문에, React의 JSX 문법도 함께 사용할 수 있다. TS와 TSX 모두 TypeScript 컴파일러에 의해 JavaScript 코드로 변환된다.