(번외) jsx 등장 배경

jsx는 무슨 확장자일까

프로젝트 파일을 보다 보면 .jsx나 .tsx 같은 확장자가 눈에 들어옵니다.
jsx(타입스크립트라면 tsx)는 무슨 확장자인지 궁금하실 수 있습니다.

이걸 이해하려면 React가 등장하기 전의 웹 개발이 어땠는지부터 짧게 보는 게 좋습니다.

React가 등장하기 전에는 웹을 개발할 때 HTML, CSS, JavaScript를 모두 따로 관리했습니다.

화면의 어떤 부분 하나를 수정하려면 이 세 파일을 넘나들어야 했습니다.

작은 페이지에서는 이것도 괜찮았습니다.
하지만 화면이 복잡해지면 문제가 생겼습니다.

하나의 화면 안에는 헤더, 사이드바, 카드 목록, 모달 같은 구성요소들이 있습니다.
각각 자기만의 데이터와 동작을 가지고 있는데, 파일은 HTML 하나, CSS 하나, JS 하나로 전부 뒤섞여 있었습니다.

구성요소가 늘어날수록 어디서 뭘 바꿔야 하는지 찾기가 점점 어려워졌습니다.

이걸 문제로 느낀 개발자들은 다른 접근을 시도했습니다.

"화면을 파일 종류(HTML/CSS/JS)로 나누지 말고, 구성요소(컴포넌트) 단위로 나누자."

헤더는 헤더끼리, 카드는 카드끼리 — 하나의 구성요소에 필요한 구조, 스타일, 동작을 한 곳에 모으는 겁니다.

그러려면 자바스크립트 안에서 화면 구조도 같이 적을 수 있어야 했습니다.
그래서 등장한 문법이 JSX입니다.

JSX는 JavaScript 안에서 HTML 같은 태그를 직접 쓸 수 있게 해주는 문법입니다.

function Header() {
  return (
    <header>
      <h1>할 일 목록</h1>
    </header>
  );
}

자바스크립트 함수 안에 HTML이 들어있습니다.
이 함수 하나가 곧 화면의 구성요소 — 컴포넌트입니다.

JSX는 표준 자바스크립트 문법이 아니기 때문에, 빌드 시 일반 자바스크립트로 변환됩니다.

<button onClick={addTodo}>추가</button>

이 코드는 빌드하면 이렇게 바뀝니다.

React.createElement('button', { onClick: addTodo }, '추가')

우리는 읽기 편한 JSX로 쓰고, 도구가 알아서 변환해줍니다.

TypeScript 입장에서 <div>가 타입 제네릭(<T>)인지 JSX 태그인지 구분이 안 됩니다.
그래서 "이 파일에는 JSX가 있으니 <>를 HTML 태그로 해석해줘"라고 알려주는 게 .tsx 확장자입니다.

정리하면 이렇습니다.

헷갈리면 간단합니다.
return에 <태그>가 있으면 .tsx, 없으면 .ts.

여기까지 오느라 수고하셨습니다.

리액트 기초 트랙에서 다룬 핵심을 한 줄씩 되짚으면 이렇습니다.

이 감각만 잡혀 있으면 다음 단계로 올라갈 준비가 된 겁니다.