JSX

JSX 구조와 값 연결

HTML처럼 보이지만 실제로는 JavaScript 표현식이며, 중괄호로 데이터와 조건을 섞어 렌더링한다.

JSX 읽는 기준

render syntax

태그 중첩 구조

태그 중첩으로 화면에 배치될 요소 관계를 표현한다.

값 삽입

문자열, 변수, 계산 결과는 중괄호 안의 표현식으로 넣는다.

속성

className, onClick처럼 DOM과 React 규칙에 맞는 prop을 쓴다.

컴파일

브라우저가 직접 읽는 HTML이 아니라 빌드 과정에서 JS 호출로 변환된다.

JSXpropsstateUI
JSX 구조 읽기

JSX를 템플릿 문자열처럼 보지 말고, 컴포넌트가 반환하는 JavaScript 기반 UI 설명으로 읽으면 규칙이 자연스럽다.