React 프로젝트 구조 이해하기 (JSX, TSX, 빌드 과정)

React + TypeScript 시작할 때 헷갈렸던 개념 정리 (JSX, TSX, 빌드)

React 프로젝트를 처음 시작하면 이런 질문이 생긴다.

• JSX는 뭐지?
• TSX는 또 뭐지?
• TypeScript는 왜 쓰지?
• 빌드는 왜 필요하지?

그래서 React 프로젝트 구조 기준으로 정리해봤다.

 

 

1. React에서 JSX를 사용하는 이유

React에서 UI를 만드는 기본 방식은 원래 이런 코드였다.

React.createElement("h1", null, "Hello")

 

하지만 이렇게 작성하면 코드가 너무 복잡해진다.

그래서 React에서는 JSX라는 문법을 사용한다.

<h1>Hello</h1>

이렇게 작성하면 HTML처럼 UI를 쉽게 작성할 수 있다.

 

하지만 중요한 점이 있다.

 

JSX는 HTML이 아니다.

JSX는 JavaScript 안에서 UI를 작성하기 위한 문법이다.

 

 

2. JSX는 무엇의 약자일까?

JSX는 JavaScript XML의 줄임말이다.

 

즉,

JavaScript 안에서 XML(HTML처럼 보이는 구조)을 작성하는 문법

 

예를 들어 React 컴포넌트에서는 이렇게 사용한다.

function App() {
  return (
    <h1>Hello React</h1>
  )
}

여기서 <h1>Hello React</h1> 부분이 JSX이다.

 

 

3. JSX는 어떻게 브라우저에서 실행될까?

브라우저는 JSX를 이해하지 못한다.

브라우저가 이해하는 것은 HTML, CSS JavaScript 뿐이다.

 

그래서 JSX는 실제로 실행되기 전에

JavaScript 코드로 변환된다.

 

[ 예시 ]

// JSX 코드
<h1>Hello</h1>

// 변환 후
React.createElement("h1", null, "Hello")

이 과정은 빌드 도구가 처리한다.

 

 

4. TSX 파일은 무엇일까?

App.tsx, main.tsx 등

.tsx는 TypeScript + JSX를 의미한다.

 

즉,

TypeScript 코드 안에서 JSX를 사용할 수 있는 파일

 

[ 예시 ]

function App() {
  const name: string = "React"

  return <h1>Hello {name}</h1>
}

• const name: string → TypeScript
• <h1>Hello {name}</h1> → JSX

 

 

5. React에서 빌드가 필요한 이유

작성하는 React 코드는 보통 이런 형태이다.

 

TypeScript
JSX
최신 JavaScript 문법

 

하지만 브라우저는 이것들을 바로 이해하지 못한다.

그래서 이런 변환 과정이 필요하다.

 

TypeScript → JavaScript
JSX → JavaScript

 

이 변환을 처리하는 도구를 빌드 도구라고 한다.

• Vite
• Webpack
• Turbopack

이런 도구들이 코드를 변환하고 브라우저에서 실행할 수 있게 만들어준다.

 

 

6. React + Vite 프로젝트 흐름

index.html
↓
main.tsx
↓
App.tsx
↓
JSX 코드
↓
빌드 도구(Vite)
↓
JavaScript
↓
브라우저 실행

 

즉!!

작성한 JSX와 TypeScript 코드는
빌드 과정에서 JavaScript로 변환되어 브라우저에서 실행된다.

 

React에서는 JSX로 UI를 작성하고,
이 코드는 빌드 과정에서 JavaScript로 변환되어 브라우저에서 실행된다.

 

2026.03.06 - 개인 학습 기록