[React] .js & .jsx

 

React 프로젝트를 만들어봤다면 다들 알겠지만, .js와 .jsx 파일이 공존한다.

물론 타입스크립트를 사용했을 경우에는 .ts 와 .tsx다.

처음 봤을 때는 그냥 직감상으로만 생각했었는데, 컴포넌트를 만들때는 .jsx(.tsx)를 사용하고, 

그냥 일반 JavaScript문서를 만들땐 .js(ts)를 만드는 것 정도? 의 차이라고만 생각했지, 정확히 어떤 의미인지 생각해보려고 하지는 않았던 것 같다. 그래서 이번에 정리해두려 한다. 

 

1. JSX (JavaScript XML)

const Component = () => {

return (
    <ReactComponent/>  // 요게 JSX
)}

제목에서도 알겠지만, jsx는 JavaScript XML 을 줄인 말이다. 

JavaScript에서 HTML 문법을 사용할 수 있도록 해주는 그런 용도. 

UI구현에 주로 사용하도록 권장하고 있으며, Babel이라는 컴파일러를 통해 일반 JS로 변환이 된다. 

때문에 jsx 내부에서는 자바스크립트 문법을 사용하기 위해서 중괄호{}를 사용해줘야만 한다. 

 

2. .js VS .jsx

사실 확장자로써는 크게 차이가 없다. 거의 동일하다. 하지만 JSX는 JS 표준 문법이 아니라는 점은 알고 있으면 될 것 같다.

 

3. TypeScript의 경우

TypeScript에 대한 설명을 하지 않았지만 가볍게 이야기 하자면 타입에 대한 부분이 다이나믹한 JS의 관련 문제들을 해결하기 위해 타입을 명시할 수 있도록한 확장판 이라고 생각하면 될 것 같다.

tsx의 경우 jsx의 문법 사용이 가능하나, ts에서는 js의 문법 사용이 불가능하다는 점을 생각할 수 있으면 되겠다.