1
하나의 루트
컴포넌트가 반환하는 JSX는 최상위 요소 하나로 묶습니다.
<>...</>
JSX 기본 점검
JSX는 HTML과 닮았지만 최종적으로는 JavaScript 표현식입니다. 화면 구조를 먼저 잡고, JSX 전용 속성 이름과 중괄호 규칙을 확인하면 초반 오류를 줄일 수 있습니다.
2
속성은 camelCase
DOM 속성 이름은 JavaScript 스타일에 맞춰 작성합니다.
className, onClick
3
빈 태그는 닫기
자식이 없는 태그도 JSX에서는 명시적으로 닫아야 합니다.
<img />
4
값은 중괄호
변수, 함수 결과, 조건 표현식은 중괄호 안에 넣습니다.
{name}
스타일 클래스
HTML의 `class`는 JSX에서 이름을 바꿉니다.
<button class="primary">
<button className="primary">
동적 값
문자열이 아니라 JavaScript 값을 넣을 때는 중괄호를 씁니다.
src="imageUrl"
src={imageUrl}