JSX

HTML처럼 쓰지만 JavaScript로 변환된다

JSX는 UI 구조를 선언적으로 적는 문법이다. 브라우저가 직접 실행하는 HTML이 아니라, 빌드 과정에서 React element를 만드는 코드가 된다.

표현 UI를 태그처럼 작성
변환 JS 객체로 컴파일
규칙 JS 이름 규칙을 따른다
컴포넌트 안의 JSX 
<button className="buy" onClick={add}>
  {price}원 담기
</button>

JSX가 화면이 되기까지

겉모습은 HTML에 가깝지만 실제 흐름은 JavaScript 객체 생성에 가깝다.

JSX

태그처럼 작성

컴포넌트가 반환할 UI 구조를 코드 안에 선언한다.

<h1>Hello</h1>
Compile

JS 코드로 변환

Babel이나 Vite 파이프라인이 JSX를 실행 가능한 코드로 바꾼다. 

jsx(...)
Element

객체로 표현

React는 type, props, children 정보를 가진 element를 비교한다.

type "h1"
children "Hello"
Render

DOM 갱신

이전 결과와 비교해 필요한 부분만 브라우저 화면에 반영한다.

<h1>Hello</h1>

JSX 규칙은 JS 기준이다

HTML과 비슷해 보여도 속성, 표현식, 닫는 방식은 JavaScript 문법에 맞춘다.

Root 하나로 감싸기

컴포넌트는 하나의 최상위 요소나 Fragment를 반환해야 한다.

<>...</>
Name camelCase 속성

class는 className, for는 htmlFor로 쓴다.

Close 단일 태그 닫기

자식이 없는 태그도 />로 명시적으로 닫아야 한다.

<img />
Expr 중괄호 표현식

변수, 함수 호출, 삼항 연산자는 {...} 안에 넣는다.

{name}

HTML과 헷갈리는 지점

틀린 문법을 외우기보다 왜 다른지 매핑으로 기억한다.

속성 이름 매핑

DOM 속성을 JavaScript 객체처럼 다루기 때문에 이름이 바뀐다.

HTML class, for, onclick
JSX className, htmlFor, onClick

값을 넣는 방식

문자열은 따옴표, JavaScript 값은 중괄호로 구분한다.

문자열 alt="로고"
표현식 src={imageUrl}