HTML을 JSX로 변환(React)

HTML을 React 컴포넌트에 복사하면 첫 번째 class 속성에서 바로 깨집니다. JSX는 JavaScript이므로 class 대신 className, for 대신 htmlFor, 문자열 대신 style 객체, 카멜케이스 이벤트와 SVG 속성 이름, 모든 요소의 닫힘, 텍스트 속 중괄호 이스케이프가 필요합니다. 템플릿, 디자인 도구, 코드 조각 사이트의 HTML을 붙여 넣으면 올바른 JSX를 얻을 수 있고, 원하면 함수 컴포넌트로 감싸며, React에서 다르게 동작하는 부분은 비고로 알려 줍니다.

사용 방법

1. HTML을 붙여 넣습니다. 조각이든 페이지 전체든 됩니다(<body>만 변환됩니다).
2. 원하면 컴포넌트 이름을 입력해 export default function으로 감쌉니다.
3. value/checked를 defaultValue/defaultChecked로 바꿀지, 인라인 핸들러를 화살표 함수로 바꿀지 고릅니다.
4. JSX를 복사하고 비고를 확인합니다.

계산식

class → className · for → htmlFor · tabindex → tabIndex · style="a-b: c" → style={{ aB: "c" }} · onclick="f()" → onClick={(event) => { f() }} · <br> → <br />

속성은 React의 DOM 속성 이름을 따르며 data-*와 aria-*는 그대로 둡니다. <svg> 안에서는 하이픈 속성이 카멜케이스로 바뀌고(stroke-width → strokeWidth) 소문자 이름이 복원됩니다(viewbox → viewBox). JSX가 예약한 텍스트 문자는 이스케이프됩니다. { 와 }는 {'{'}와 {'}'}로, >는 &gt;로 바뀝니다. 주석은 {/* */}가 됩니다. 최상위 노드가 여러 개면 <> 프래그먼트로 감쌉니다. 생략된 선택적 종료 태그(li, p, td…)는 추가됩니다.

예시

예제에서 class="card"는 className이 되고, style 문자열은 style={{ padding: "16px", borderRadius: "8px" }}가 되며, for="email"은 htmlFor, <input … value="" autofocus tabindex="1">은 <input … defaultValue="" autoFocus tabIndex="1" />이 됩니다. onclick="subscribe()"는 onClick={(event) => { subscribe() }}가 되고, "가입하기 {무료}"의 중괄호는 이스케이프되며, SVG 안의 viewbox와 stroke-width는 viewBox와 strokeWidth가 됩니다. 결과는 SignupCard 컴포넌트로 감싸지고, 주석은 {/* 가입 카드 */}로 프래그먼트 안에 남습니다.