[React] JS와 JSX의 차이에 대해 알아보자(Feat. TS와 TSX)

React에서 개발을 진행하신 분들은 아마 한번쯤은 JS확장자와 JSX확장자를 언제 사용해야 하는가에 대한 의문이 드실 수 있습니다. 대부분의 React강의를 보면 JSX확장자를 이용하여 개발을 진행하면 된다고 하는 경우가 일반적입니다. 하지만 간혹 JS확장자로 파일을 만들고 컴파일을 진행해도 에러 문구 없이 정상적으로 컴파일이 되는 경험을 하실 수 있습니다. 

 

그렇다면 왜 jsx확장자를 사용하여 파일을 생성하라고 권장할까요 ?
js와 jsx의 차이는 무엇일까요 ? 

 

이러한 궁금증은 Typescript를 적용하여 React프로젝트를 진행할 경우 더욱 커지게 됩니다. 대부분의 강의 및 자료에서 TS확장자와 TSX확장자를 명확히 구분하여 사용하는데, '어떠한 기준'을 바탕으로 이를 구분하는지 모르고 사용하는 경우 전체 코드에 대한 이해도가 낮아질 수 있기 때문입니다. 

 

오늘은 React에서 JS와 JSX를 어떠한 기준으로 사용하면 좋을지, 나아가 TS와 TSX의 차이는 무엇인지에 대해 알아보겠습니다. 

 

JS와 JSX의 차이

JavaScript(JS)와 JSX(JavaScript XML)는 React 프로젝트에서 사용되는 두 가지 파일 형식입니다.

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

JSX 파일은 HTML과 JavaScript를 혼합하여 사용합니다. JSX 파일에는 JavaScript 코드가 포함되어 있지만, HTML 요소와 유사한 구문을 사용하여 React에서 UI를 구성하는 데 사용됩니다.

공식 문서에서 설명하기로는 JSX파일은 UI 관련 작업을 할 때 권장되며, React에서 에러, 경고 메세지를 표시해준다고 합니다.

 

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

 

JSX를 JS로 변환하는 과정

브라우저는 JSX를 이해하지 못합니다. 따라서 작성된 JSX 코드를 JavaScript 코드로 변환하는 작업이 필요합니다.

JSX 코드는 자바스크립트 컴파일러인 @babel을 통해 Javascript로 변환됩니다. Babel은 JSX를 JavaScript로 변환하는 데 사용되는 가장 일반적인 도구입니다. 

 

리액트에서는 JSX를 Javascript로 변환하기 때문에 Javascript 문법을 사용하기 위해선 따로 mark를 해줘야 합니다. 따라서 JavaScript를 JSX 내부에서 사용할 때에는 반드시 중괄호를 사용해야 합니다.

const name = 'Lamue';
const hello = <h1>Hello, My name is {name}</h1>;

이처럼 중괄호 안에 다양한 자바스크립트 표현식을 담아 사용할 수  있습니다.

 

JS와 JSX를 반드시 구분해서 사용해야 할까 ? 

이와 관련된 논의는 스택오버플로우의 ReactJS - .JS vs .JSX의 게시물에서 확인할 수 있습니다.

해당 게시물의 가장 높은 추천 수를 받은 답변의 내용을 확인해보면 'JS와 JSX는 확장자로서의 차이가 없다' 라는 의견이 현재 가장 지배적인 것 같습니다. 다만 게시물의 작성자는 JSX는 자바스크립트 표준 문법이 아니기에 이에 관한 논쟁이 있을 수 있다고 말하고 있습니다.

하지만 위의 JSX에 대한 설명에서 보았듯이 결국 리액트로 작성한 코드들은 자바스크립트로 변환됩니다. 따라서 컴포넌트 파일을 만들어 사용하는 리액트의 JSX 관련 코드는 .jsx로 만들고, 나머지 일반 JavaScript 코드들은 .js로 만들면 되지만 이에 너무 매몰될 필요는 없어 보입니다. 

 

TS와 TSX의 차이

TS(TypeScript)파일은 TypeScript는 JavaScript를 기반으로 하며, 정적 타입 검사를 지원하는 JavaScript의 슈퍼셋입니다. TS는 대개 TS 파일 확장자를 사용하여 작성합니다.

TSX(TypeScript with JSX)파일은 React에서 UI를 작성하는 데 사용되는 TypeScript입니다. React에서 JSX를 사용해야 하는 상황과 유사한 상황에 일반적으로 TSX 파일 확장자를 사용하여 작성합니다.

TS와 TSX 모두 TypeScript 언어의 문법을 사용하므로, TypeScript에서 사용할 수 있는 모든 기능과 타입 검사 기능을 TSX에서도 사용할 수 있습니다. TSX는 React 컴포넌트와 함께 사용되기 때문에, React의 JSX 문법도 함께 사용할 수 있습니다.

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

TS와 TSX 모두 TypeScript 컴파일러에 의해 JavaScript 코드로 변환된다는 특징이 있습니다.

 

 

마치며

지금까지 React에서 JS와 JSX를 어떠한 기준으로 사용하면 좋을지, 나아가 TS와 TSX의 차이는 무엇인지에 대해 알아보았습니다. 

 

최근 React 프로젝트에 Typescript를 사용하여 파일을 작성할 일이 많았는데, ts확장자와 tsx확장자의 차이도 모르는 체 막무가내로 코드를 긁어오곤 했습니다. 분명 코드를 작성한 분은 명확한 기준을 가지고 파일의 확장자를 구분한 거 같은데 말이죠. 결국은 이런 사소한 이해도의 차이가 코드 품질의 차이를 만들어낸다는 점을 본 포스팅을 작성하며 깨달았습니다. 

 

향후 파일을 생성하고, 코드를 작성하실 때는 JS / JSX , TS / TSX 파일의 차이를 염두하고 프로젝트를 진행하면 좋을 거 같습니다. 

 

 

참고

https://stackoverflow.com/questions/46169472/reactjs-js-vs-jsx

ReactJS - .JS vs .JSX

https://subtlething.tistory.com/112 

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