React 19 Tutorial - 7 - Rules of JSX
- 단일 루트 요소 반환: 모든 React 컴포넌트는 반드시 하나의 단일 루트 요소를 반환해야 합니다. 여러 요소를 나란히 반환할 수 없으며,
<div> 또는 <React.Fragment> (단축 문법 <></>)로 감싸야 합니다. 📦
- 모든 태그 닫기: HTML에서 자체 닫기 태그(예:
<input>, <br>)가 필요 없는 경우에도 JSX에서는 모든 태그를 반드시 명시적으로 닫아야 합니다(예: <input />, <br />). 🔒
- 카멜 케이스 속성 이름: JSX 속성 이름은 카멜 케이스로 작성해야 합니다.
class는 className으로, for는 htmlFor로 변경되는 등 JavaScript 예약어와 충돌하는 속성은 이름이 바뀝니다. 🐪
- JavaScript 표현식 삽입: 중괄호
{}를 사용하여 JSX 마크업 내에 JavaScript 변수, 계산, 함수 호출 등 모든 유효한 JavaScript 표현식을 직접 삽입하여 동적인 콘텐츠를 만들 수 있습니다. ✨
- 핵심 이해: JSX 규칙은 JSX가 HTML이 아닌 JavaScript의 확장이라는 본질에서 비롯됩니다. 이 근본적인 이해가 규칙을 쉽게 받아들이고 활용하는 데 중요합니다. 🧠
데브허브 | DEVHUB | React 19 Tutorial - 7 - Rules of JSX