ZeroTool Workbench
HTML → JSX 변환기
브라우저에서 HTML을 React JSX로 즉시 변환. className, htmlFor, 인라인 스타일 객체, 카멜케이스 이벤트, 자기 닫힘 태그 처리. 무료, 회원가입 불필요.
사용 방법
- 왼쪽 텍스트 영역에 HTML을 붙여넣습니다.
- 입력하는 즉시 오른쪽 텍스트 영역에 JSX 출력이 나타납니다.
- 복사를 클릭하여 JSX 출력을 클립보드에 복사합니다.
변환 규칙
| HTML | JSX |
|---|---|
class="..." | className="..." |
for="..." | htmlFor="..." |
style="color:red" | style={{ color: 'red' }} |
onclick="..." | onClick="..." |
onchange="..." | onChange="..." |
tabindex | tabIndex |
readonly | readOnly |
maxlength | maxLength |
colspan | colSpan |
rowspan | rowSpan |
crossorigin | crossOrigin |
contenteditable | contentEditable |
<br> | <br /> |
<img src="..."> | <img src="..." /> |
<input ...> | <input ... /> |
<!-- 주석 --> | {/* 주석 */} |
주요 사용 사례
- 정적 HTML 템플릿을 React 컴포넌트로 마이그레이션
- 디자인 도구(Figma, Webflow)에서 내보낸 HTML 스니펫을 JSX 파일에 붙여넣기
- HTML과 JSX 속성 명명의 차이 학습
- HTML 이메일 템플릿을 React 이메일 라이브러리용으로 변환
- 서드파티 HTML 위젯을 React 프로젝트에 빠르게 적용
FAQ
HTML → JSX 변환기는 무엇을 하나요?
표준 HTML 마크업을 유효한 React JSX 구문으로 변환합니다. 주요 변경 사항으로는 class를 className으로, for를 htmlFor로 변경하고, 인라인 스타일을 JavaScript 객체로 변환하며, 이벤트 핸들러를 카멜케이스로 바꾸고, 빈 요소에 명시적인 자기 닫힘 슬래시를 추가합니다.
JSX에서 class 대신 className을 사용하는 이유는?
JSX는 JavaScript로 컴파일되는데, class는 JavaScript의 예약어입니다. React는 충돌을 피하기 위해 className을 사용합니다. 변환기가 이 이름 변경을 자동으로 처리합니다.
인라인 스타일은 어떻게 변환되나요?
HTML 인라인 스타일은 문자열을 사용합니다: style="color: red; font-size: 14px". JSX는 객체가 필요합니다: style={{ color: 'red', fontSize: '14px' }}. 변환기가 문자열을 파싱하여 카멜케이스 속성 이름을 생성합니다.
HTML 주석은 JSX에서 어떻게 되나요?
HTML 주석(<!-- 텍스트 -->)은 JSX 표현식 주석({/* 텍스트 */})으로 변환됩니다. 이것이 React JSX 파서가 허용하는 유일한 주석 형식입니다.
데이터가 서버로 전송되나요?
아니요. 변환은 JavaScript를 사용하여 브라우저에서 완전히 실행됩니다. 데이터는 전송되지 않습니다.