Blog

서론#

React를 처음 접하면
가장 먼저 마주치는 문법이 JSX다.

HTML처럼 보이지만
JavaScript 파일 안에 그대로 들어가 있고,
자연스럽게 이렇게 받아들이게 된다.

React에서는 이렇게 쓰는 거구나

JSX는 React 전용 API처럼 보이지만,
실제로는 함수 호출로 변환되는 문법이다.

JSX의 정체#

JSX는
JavaScript Syntax Extension의 약자다.

말 그대로
JavaScript 문법을 확장한 문법이다.

중요한 점은 이거다.

JSX는 브라우저가 이해하는 문법이 아니다.

브라우저는 JSX를 직접 해석하지 못한다.
JSX는 반드시 변환 과정을 거친다.

JSX는 어떻게 동작하는가#

JSX는 빌드 과정에서
일반적인 JavaScript 코드로 변환된다.

예를 들어 다음 JSX는

const element = <h1>Hello</h1>;

빌드 이후에는
대략 이런 코드로 변환된다.

const element = React.createElement("h1", null, "Hello");

즉 JSX는
React.createElement 호출을
사람이 읽기 쉬운 형태로 작성하기 위한 문법이다.

겉보기에는 HTML과 비슷하지만,
JSX는 HTML과 다르게 동작한다.

대표적인 차이는 다음과 같다.

• class 대신 className
• for 대신 htmlFor
• 모든 태그는 반드시 닫혀야 함
• JavaScript 표현식을 {}로 직접 사용 가능

이 차이들은
JSX가 HTML이 아니라
JavaScript 표현식이라는 점에서 나온다.

JSX는 왜 필요했는가#

JSX가 등장한 이유는 단순하다.

React에서는
UI를 문자열 템플릿이 아니라
상태에 따라 변하는 구조로 다루기 때문이다.

JSX는

• UI 구조
• 데이터 바인딩
• 조건부 렌더링

을 하나의 문맥 안에서 표현할 수 있게 해준다.

JSX와 표현식#

JSX 안에서는
JavaScript **표현식(expression)**만 사용할 수 있다.

<div>{count + 1}</div>

하지만 아래와 같은 문장은 사용할 수 없다.

<div>{if (count > 0) { ... }}</div>

이 차이는 중요하다.

JSX는
"JavaScript를 쓰는 곳"이 아니라,
값으로 평가될 수 있는 표현식만 허용하는 문맥이다.

그래서 조건부 렌더링에서도
삼항 연산자나 논리 연산자가 자주 사용된다.

정리#

JSX는
HTML처럼 보이지만
HTML이 아니다.

React 전용 문법처럼 보이지만,
실제로는 JavaScript의 확장 문법이며
빌드 과정에서 함수 호출로 변환된다.