React의 확장자 (*.js, *.jsx, *.tsx)

 

리액트에서는 어떤 확장자를 사용하더라도 바벨과 같은 트랜스파일러 도구 덕에 리액트 문법인 jsx을 사용할 수 있다. 그럼에도 jsx, tsx 확장자를 사용하는 이유는 공식 문서에 따르면 리액트 내에서 UI 관련 작업 시 권장하며, 에러, 경고 표시도 해준다고 한다.

 

 

확장자 차이점

 

- .js (JavaScript)

 

가장 일반적이며 익숙한 자바스크립트 파일 형식이다. 확장자가 .js여도 리액트는 기본적으로 jsx 문법을 사용한다.

* create-react-app 패키지로 생성한 프로젝트는 js파일을 기본으로 사용

 

- .jsx (JavaScript Xml)

페이스북 팀에서 자바스크립트로 HTML 마크업을 작성하기 위해 개발한 새로운 언어 형식으로, 자바스크립트 내부에 HTML을 더 쉽게 작성할 수 있다. 

JSX 사용 시 주의할 사항으로는 브라우저는 JSX 문법을 이해하지 못 해 자바스크립트로 변환하는 과정을 거치기 때문에 자바스크립트 문법 사용 시에는 {} (중괄호) 안에 넣어야 한다.

const important = "중괄호"
const pTag = <p>자바스크립트 문법은 {important} 사이에 넣어야 한다. </p>;

const math = <p>계산식, 함수 등도 사용 가능하다. {1+1}</p>

 

 

- .tsx (TypeScript Xml)

 

jsx의 타입스크립트 버전이다.

 

 

 

※ 참고 : 수코딩 (https://www.sucoding.kr)