.js 인지 .jsx 인지가 정말 중요할까?

JSX의 등장

알다시피, JS (Javascript)와 JSX (Javascript XML)은 엄연히 다른 문법이다. JSX는 JS 코드 안에서 html 문법을 쓸 수 있게 만든 확장 문법이다. JS는 별다른 처리없이 그대로 실행이 가능하지만, JSX는 Babel과 같은 트랜스파일러를 거쳐 JS 언어로 변환되어야 브라우저에서 실행이 가능하다는 차이점도 존재한다.

 

JSX는 2013년, 컴포넌트 기반의 프레임워크인 React가 등장하면서, 아래와 같이 UI 구조를 직관적으로 표현할 수 있도록 함께 등장한 문법이다. 보이는 바와 같이 사용되는 문법이 다르고, JSX의 경우에는 트랜스파일 과정이 필요하므로, “이 파일 안에서는 JSX 문법이 사용되고 있어”라는 표현 방식이 있어야 하는데, 이를 위해 React 팀은 React를 개발하면서 .jsx 라는 새로운 확장자를 도입하였다.

import React from 'react';

function Greeting(props) {
  return React.createElement('h1', null, 'Hello, ' + props.name);
}

export default Greeting;

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Greeting;

---

.js 인지 .jsx 인지가 정말 중요할까?

우리는 개발 단계, 컴파일 단계, 그리고 빌드 단계에서 알게 모르게 이 확장자를 유용하게 사용하고 있다. 코드 에디터 내에서 동작하는 문법 강조와 ESLint, Prettier같은 도구들은 언어 별로 다르게 동작해야 하는데, 이 때 확장자를 기준으로 이 도구들을 실행하기 때문이다. JS의 문법 검사는 .js 파일에서, HTML의 문법 검사는 .html 파일에서 하는 것이다. 같은 원리로, JSX의 문법 검사는 .jsx 파일에서, Vanilla JS의 문법 검사는 .js 파일에서 해야 한다. 또한 제일 중요한 것은 빌드 단계에서 파일의 확장자에 따라 적용되는 로직이 달라진다는 점이다.

 

하지만, React가 처음 등장했을 때는 개발자들의 혼란을 방지하고, 개발 편의성을 높이기 위해 빌드 시스템에서 이 확장자를 엄격하게 검사하지 않도록 구성하였다. 즉, .js 확장자 안에서 JSX 문법을 사용해도 문제없이 빌드되도록 빌드 시스템을 설계한 것이다. 그래서 개발 커뮤니티에서 종종 React 컴포넌트 파일의 확장자를 .js로 할 것이냐, .jsx 로 할 것이냐 의견이 갈리는 것을 볼 수 있다. 어느 쪽으로 결정하더라도 컨벤션만 일관되게 유지하면 괜찮다는 의견이 있지만, 확실한 것은 JSX 문법은.jsx 확장자를 가진 파일 안에서 사용하도록 설계했다는 것이다. 그래서 Lint의 rule 중에 jsx-filename-extension ****라는 옵션이 존재하는 것이다.

 

이 rule은 eslint-plugin-react 라는 플러그인에서 제공하는 rule로, JSX 문법은 .jsx 확장자를 가진 파일 안에서만 쓸 수 있도록 강제하는 rule이다. 만약 .js 파일 안에서도 JSX 문법을 사용하도록 허용하려면, 아래와 같이 extensions 옵션을 전달하면 된다.

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
}

---

결론

오늘은 .jsx 확장자를 꼭 써야하는지에 대한 내용을 다루어 보았다. 결론은, 그냥 JSX 문법은 .jsx 안에서만 다루는 것이 좋다는 것이다. React가 애초에 그렇게 설계했기 때문이다. 아직까지 ESLint에서 발생하는 에러를 제외하고는 확장자로 인해 발생했던 에러는 없었다.

 

React 팀에서 개발자들의 편의성을 위해 베풀어 준 호의를 권리라고 생각하지 말자. 하지만, 그렇다고 현재 프로젝트에서 .js (혹은 .ts ) 확장자를 컨벤션으로 쓰고 있는데, 무리하게 확장자를 변경할 필요는 없다. 파일명 변경으로 인한 커밋이 Git에 우르르 올라가게 되면 아마 사수한테 심하게 깨질 수도 있다.