JSX Rules

JSX: HTML처럼 보이지만 JavaScript 표현식

JSX는 화면 구조를 JavaScript 안에서 표현하기 위한 문법이므로 HTML 규칙과 JavaScript 규칙이 함께 적용됩니다.

Root

하나의 루트

컴포넌트는 하나의 부모 요소나 Fragment로 묶어 반환합니다.

className

속성 이름

HTML과 다른 예약어 충돌을 피하기 위해 camelCase 속성을 사용합니다.

{}

표현식 삽입

문자열, 변수, 조건식, 배열 렌더링을 중괄호 안에서 처리합니다.

Close

태그 닫기

자식이 없는 태그도 반드시 닫아 JSX 파싱 오류를 피합니다.

const title = 'React';
return <h1>{title}</h1>;