JSX가 뭐야 — 자바스크립트 안에 HTML을 넣는 문법

JSX는 자바스크립트 파일 안에서 HTML처럼 생긴 화면 코드를 함께 쓰게 해주는 문법으로, 주로 React에서 씁니다.

2026년 7월 기준, AI에게 웹 화면을 만들어 달라고 하면 십중팔구 이 JSX가 섞인 코드가 돌아옵니다.

그런데 자바스크립트 파일 안에 갑자기 <div> 같은 HTML 태그가 튀어나오면, 처음 보는 사람은 당황하기 쉽습니다.

이 글을 읽고 나면 JSX가 왜 이렇게 생겼는지, AI가 준 React 코드를 봤을 때 뭐가 뭔지 감이 잡힙니다.

JSX는 원래 따로 놀던 로직(자바스크립트)과 화면(HTML)을 한 파일에서 같이 쓰게 묶어 주는 문법입니다. React로 화면을 만들 때 거의 항상 등장합니다.

JSX가 뭐야?

JSX는 JavaScript XML의 줄임말입니다.

이름 그대로 자바스크립트(JavaScript) 안에서 XML, 그러니까 HTML과 아주 비슷하게 생긴 태그를 쓸 수 있게 해주는 문법입니다.

원래 웹 개발은 화면을 그리는 HTML 파일과, 그 화면을 움직이는 자바스크립트 파일이 서로 따로 떨어져 있었습니다.

버튼 모양은 HTML에, 버튼을 눌렀을 때 벌어지는 일은 자바스크립트에 나눠 적는 식이었죠.

JSX는 이 둘을 한 곳에 모아, "이 화면"과 "이 화면을 다루는 코드"를 같은 자리에서 쓰게 해줍니다.

JSX는 어떻게 생겼나

말로만 들으면 감이 잘 안 오니 아주 짧은 예시를 보겠습니다.

function Hello() {
  return <div>안녕하세요</div>;
}

자바스크립트 함수인데, return 뒤에 <div>안녕하세요</div>라는 HTML 조각이 그대로 들어가 있습니다.

보통 자바스크립트라면 저기에 문자열이나 숫자가 오는데, JSX에서는 화면 조각이 자연스럽게 자리를 차지합니다.

이렇게 자바스크립트와 화면 태그가 한 몸처럼 붙어 있는 것이 바로 JSX입니다.

왜 굳이 이렇게 쓸까?

화면과 그 화면을 다루는 코드가 멀리 떨어져 있으면 관리가 번거롭습니다.

버튼 하나를 고치려고 HTML 파일과 자바스크립트 파일을 왔다 갔다 해야 하기 때문입니다.

JSX는 관련된 화면과 로직을 한 덩어리로 묶어서, 한 파일만 봐도 이 부품이 어떻게 생겼고 어떻게 움직이는지 알 수 있게 해줍니다.

화면을 부품(컴포넌트) 단위로 조립하는 React의 방식과 잘 맞아서, React에서는 JSX가 사실상 기본으로 쓰입니다.

개인적으로는 처음엔 낯설어도, 화면 하나에 필요한 걸 한자리에서 본다는 점 때문에 익숙해지면 오히려 편하다고 생각합니다.

일반 방식과 JSX 방식을 나란히 놓으면 차이가 더 잘 보입니다.

구분	화면과 코드의 위치
일반 방식	HTML 파일과 자바스크립트 파일이 따로
JSX 방식	한 파일 안에 화면과 로직을 함께

브라우저는 JSX를 직접 못 읽는다

한 가지 함정이 있습니다.

웹 브라우저는 JSX를 그대로 이해하지 못합니다.

JSX는 사람이 편하게 쓰라고 만든 문법일 뿐, 브라우저가 아는 순수 자바스크립트가 아니기 때문입니다.

그래서 JSX로 짠 코드는 브라우저가 알아듣는 평범한 자바스크립트로 한 번 번역하는 과정을 거칩니다.

이 번역 과정을 트랜스파일이라고 부르는데, 개발 도구가 알아서 처리해 주기 때문에 초보자가 직접 손댈 일은 거의 없습니다.

정리하면, JSX는 "사람이 쓰기 편한 화면 문법 → 도구가 브라우저용 자바스크립트로 번역 → 실행"의 흐름을 거칩니다.

그래서 AI랑 무슨 상관인데?

AI에게 "간단한 웹 화면 만들어 줘"라고 하면 요즘은 대부분 React 코드를 내놓습니다.

그 코드를 열어 보면 자바스크립트 함수 안에 <div>, <button> 같은 HTML 태그가 섞여 있어 당황할 수 있습니다.

이게 바로 JSX인데, 문법이 섞여 있어도 오류가 아니라 원래 그렇게 쓰는 것입니다.

JSX라는 이름과 개념만 알아 두면, AI가 준 화면 코드를 읽을 때 훨씬 덜 헤맵니다.

자주 묻는 질문

JSX는 React에서만 쓰나요?

주로 React에서 씁니다.

JSX 자체가 React를 위해 만들어진 문법이라, 다른 환경에서 볼 일은 상대적으로 드뭅니다.

초보 단계에서는 "JSX = React 화면 문법" 정도로 이해해도 충분합니다.

JSX와 HTML은 완전히 같은 건가요?

비슷하게 생겼지만 같지는 않습니다.

JSX는 자바스크립트 안에서 도는 문법이라, HTML과 미묘하게 다른 규칙이 몇 가지 있습니다.

다만 처음에는 "HTML과 거의 비슷하게 생긴 것"으로 받아들여도 됩니다.

결론

JSX는 자바스크립트 안에서 HTML 같은 화면 코드를 함께 쓰게 해주는 문법이고, React에서 화면을 만들 때 거의 항상 등장합니다.

따로 놀던 로직과 화면을 한 파일에 묶어 관리를 편하게 해주는 것이 핵심입니다.

JSX에 타입까지 더한 .tsx 파일은 다음 글에서 이어서 다루겠습니다.

 

 

참고한 자료

JSX의 정의와 파일 확장자 구분은 TypeScript 공식 한국어 문서와 React 공식 문서를 참고했습니다.