[FE / REACT] .js 와 .jsx 차이

서론...

 

리액트를 개발하면서 .js 파일과 .jsx 파일을 사용하는데

보통은 .jsx를 사용한다고만 알고있었지

실제로 둘의 차이점을 복기해가면서 개발하지 않았던 것 같다

 

두 파일의 차이점에 대해 의문이 들었고

개발을 하는데 이런 기본적인 지식을 모르고 개발한다니! 라는 생각이 들어 찾아보게 되었다

 

.js 파일

 

.js 확장자의 파일은

일반적인 자바스크립트 파일이다

 

즉 일반적인 Javascript 구문만을 사용하여 동작한다

 

.jsx 파일

 

.jsx 파일은

Javascript XML의 약자로 React 컴포넌트를 js 파일 내에서 작성할 수 있는 문법 확장이다.

 

즉, js 파일 내에서 UI 컴포넌트를 정의할 수 있고 HTML 과 유사한 구문을 사용해 UI 구조를 보다 직관적으로 작성할 수 있게 하는게 jsx 파일이다.

 

Jsx는 React와 같은 특정 프레임워크에 더 특화되어 있고 일반적인 javascript 문법과 HTML의 스타일의 마크업을 혼합해서 사용할 수 있기 때문에 

React에서 개발할 때는 jsx 파일로 개발하는것을 선호? 한다고 한다

 

+ 웹 브라우저는 JSX 문법을 직접 이해하거나 실행할 수 없기 때문에 Babel과 같은 트랜스 파일러를 사용해 브라우저가 이해할 수 있는 Javascript코드로 변환함