HTML to JSX 변환기
HTML 코드를 유효한 React JSX로 변환합니다. class를 className으로, 인라인 스타일을 객체로, void 요소 자동 닫기 등을 자동으로 처리합니다.
HTML 입력0 문자
JSX 출력
변환 규칙
HTML
JSX
이유
class="..."
className="..."
class는 JS 예약어
for="..."
htmlFor="..."
for는 JS 예약어
style="color: red"
style={{ color: "red" }}
JSX는 스타일 객체 사용
tabindex="0"
tabIndex="0"
JSX는 camelCase 속성 사용
<!-- comment -->
{/* comment */}
JSX는 JS 주석 구문 사용
<br>
<br />
JSX는 자체 닫기 태그 필요
onclick="fn()"
onClick="fn()"
JSX는 camelCase 이벤트 사용
왜 JSX는 HTML과 다른가요?
JSX는 HTML이 아닌 JavaScript의 구문 확장입니다. JavaScript 함수 호출로 컴파일되기 때문에 일부 HTML 속성은 JavaScript 예약어(class, for 등)와 충돌하고, 인라인 스타일은 CSS 문자열이 아닌 JavaScript 객체여야 합니다.
이 도구가 변환하는 것
- - class를 className으로, for를 htmlFor로
- - 인라인 스타일 문자열을 JavaScript 객체로
- - HTML 주석을 JSX 주석으로
- - void 요소 자체 닫기 (br, img, hr, input)
- - camelCase 이벤트 핸들러와 속성
온라인에서 HTML을 JSX로 변환하는 방법
- 1.왼쪽 패널에 HTML 코드를 붙여넣거나 샘플 로드를 클릭하여 예제를 시도하세요.
- 2.변환기가 HTML을 실시간으로 유효한 JSX로 자동 변환합니다.
- 3.아래 변환 규칙 표를 확인하여 각 변환을 이해하세요.
- 4.복사를 클릭하여 JSX 출력을 클립보드에 복사합니다.
FAQ
이 도구는 모든 HTML 속성을 처리하나요?
이 도구는 class, for, tabindex, readonly 등 30개 이상의 가장 일반적인 HTML-JSX 속성 차이를 변환합니다. 또한 모든 인라인 이벤트 핸들러(onclick, onchange 등)를 camelCase 형식으로 변환합니다.
완전한 React 컴포넌트가 생성되나요?
이 도구는 원시 HTML 마크업을 유효한 JSX 구문으로 변환합니다. React 컴포넌트 함수로 래핑하지는 않습니다. JSX 출력을 컴포넌트의 return 문에 직접 붙여넣을 수 있습니다.
인라인 스타일은 어떻게 변환되나요?
CSS 스타일 문자열 style="color: red; font-size: 16px"는 JSX 스타일 객체로 변환됩니다: style={{ color: "red", fontSize: "16px" }}. CSS 속성은 자동으로 camelCase로 변환됩니다.
HTML 데이터가 서버로 전송되나요?
아닙니다. 모든 변환은 브라우저에서 JavaScript를 사용하여 이루어집니다. HTML 코드가 업로드, 저장 또는 서버에서 처리되는 일은 없습니다.