타입스크립트를 사용하게 되면 이전과는 달리 파일의 확장자를 js, jsx에서 ts, tsx로 바꾸어 사용하게 된다.
분명 확장자는 다른데, 어떤 확장자를 사용해도 별 차이점을 느낄 수가 없다. 그렇다면 같은 기능을 하는데 확장자가 나뉘는 이유가 무엇일까?
1. JavaScript XML (JSX)
타입스크립트 없이 React를 사용했던 시절로 돌아가보자.
그 당시에도 파일의 확장자는 js와 jsx. 2가지가 존재했고, 확장자를 무엇으로 해도 별 차이가 없었다. 허나 이것은 겉으로 볼 때만 그런 것이고, 사실 잘 보이지 않는 큰 차이점이 존재했었다.
React에서는 UI 컴포넌트를 처리하는 방법으로 자바스크립트 언어의 확장이라 할 수 있는 JavaScript XML을 사용하고 있다. JSX는 HTML과 유사한 구문을 사용하여 컴포넌트의 구조를 직관적으로 기술할 수 있게 해주는 역할을 수행한다.
React의 가장 큰 특징 중 하나는 바로 JS 파일에서 HTML 태그를 이용할 수 있다는 점이다. 기존 자바스크립트에서는 HTML 파일과 JS 파일이 따로 나뉘어 각각의 코드를 작성해야 했다. 이렇게 되면 화면의 구조를 직관적으로 파악하히가 힘들다, 어느 지점에서 어떤 코드가 사용되는지, 어떤 곳에 연결되어 있는지 파악하는데 많은 불편함이 발생할 수 밖에 없다.
JavaScript XML의 사용으로 웹 개발자들은 표준 HTML 태그를 직접 사용하여, 컴포넌트의 구조와 레이아웃을 코드상에서 직관적으로 파악할 수 있게 되었고. 자바스크립트 코드를 바로 사용하게 되어 HTML 구조에 여러 로직들을 더 편하게 통합시킬 수 있게 되었다. 개발의 편의성, 코드의 가독성과 유지보수의 효율성이 크게 향상된 것이다.
JSX 사용의 이점
UI의 구조를 파악하기 편함.
// 전통적인 JavaScript 방식
const button = document.createElement('button');
button.textContent = 'Click me';
document.body.appendChild(button);// JSX 사용 예시
const button = <button>Click me</button>;전통적인 JavaScript 방식에서는 UI 구성 요소를 문자열 형태로 작성하고 DOM API를 통해 요소를 추가해야한다.
반면에 JSX를 사용하면 매우 간결하고 선언적인 방식으로 표현할 수 있다.
JavaScript 코드를 UI 구성 내부에 쉽게 통합할 수 있음.
// 전통적인 JavaScript 방식
function createUserList(users) {
const userList = document.createElement('ul');
users.forEach(user => {
const listItem = document.createElement('li');
listItem.textContent = user.name;
userList.appendChild(listItem);
});
return userList;
}
const userListElement = createUserList(users);
document.body.appendChild(userListElement);// JSX 사용 예시
function UserList({ users }) {
return (
<ul>
{users.map(user => <li key={user.id}>{user.name}</li>)}
</ul>
);
}전통적인 JavaScript 방식에서는 반복문을 사용하여 각 사용자에 대한 li 요소를 생성하고, 이를 ul 요소에 추가해야 한다. 이 과정들은 개발자가 직접 DOM 요소를 생성하고 조작해야 하므로 더 복잡하고 어렵고, 직관적이지 않다.
반면 JavaScript XML 사용시, HTML 태그를 바로 가져다가 사용할 수 있어 위와 같이 명확하고 간결하게 사용자 목록의 표현이 가능해진다.
2. js, jsx? ts, tsx?
두 파일 확장자의 차이는 바로 JavaScript XML (JSX)를 사용하는지 여부에 따라 달라진다. jsx와 tsx는 JavaScript XML를 사용하고, js와 ts는 사용하지 않는다.
그렇다면 이런 차이점을 구분해서 파일의 확장자명을 사용해야할까? 당연히 그렇게 하는 것이 좋다.
jsx와 tsx에서는 JavaScript XML를 처리하기 위한 추가적인 변환 과정이 발생하게 된다. JavaScript XML를 사용하지 않는 파일에도 jsx나 tsx를 사용하게 되면 불필요한 작업이 발생하게 되는 것이고, 성능의 저하로 이어질 수 있다.
따라서. jsx와 tsx는 오직 컴포넌트 관련 파일에만 사용하는 것이 좋다. JavaScript XML를 사용하지 않는 순수 로직, API 호출, 타입 정의, 설정 파일 등에는 jsx 혹은 tsx 확장자를 사용하지 않아야 한다.
