HTML → JSX 변환기
브라우저에서 HTML을 React JSX로 즉시 변환. className, htmlFor, 인라인 스타일 객체, 카멜케이스 이벤트, 자기 닫힘 태그 처리. 무료, 회원가입 불필요.
- 브라우저에서 처리
- 데이터가 브라우저 밖으로 나가지 않습니다
- 무료 · 회원가입 불필요
WeChat으로 스캔하여 공유
예시·자세한 설명·자주 묻는 질문 실제 출력이 있는 예시, 다른 도구와의 차이, 자주 묻는 질문.
변환 규칙
| HTML | JSX |
|---|---|
class="..." | className="..." |
for="..." | htmlFor="..." |
style="color:red" | style={{ "color": "red" }} |
onclick="save()" | onClick={(event) => { save() }} |
ondblclick="..." / onmouseover="..." | onDoubleClick={...} / onMouseOver={...} |
tabindex | tabIndex |
readonly | readOnly |
maxlength | maxLength |
colspan | colSpan |
rowspan | rowSpan |
crossorigin | crossOrigin |
contenteditable | contentEditable |
<br> | <br /> |
<img src="..."> | <img src="..." /> |
<input ...> | <input ... /> |
<!-- 주석 --> | {/* 주석 */} |
텍스트의 {name}, a < b | {name}, a < b |
주요 사용 사례
- 정적 HTML 템플릿을 React 컴포넌트로 마이그레이션
- 디자인 도구(Figma, Webflow)에서 내보낸 HTML 스니펫을 JSX 파일에 붙여넣기
- HTML과 JSX 속성 명명의 차이 학습
- HTML 이메일 템플릿을 React 이메일 라이브러리용으로 변환
- 서드파티 HTML 위젯을 React 프로젝트에 빠르게 적용
변환 예시
입력:
<label for="email" class="lbl">Email</label>
<input id="email" type="email" required>
<div style="background-image: url('a.png'); font-size:14px">x</div>
<!-- footer -->출력:
<label htmlFor="email" className="lbl">Email</label>
<input id="email" type="email" required />
<div style={{ "backgroundImage": "url('a.png')", "fontSize": "14px" }}>x</div>
{/* footer */}data-*와 aria-* 속성은 하이픈 그대로 남으며, React에서도 이렇게 써야 합니다. 숫자 속성은 colSpan="2"처럼 문자열로 남지만 React는 그대로 받아들입니다.
직접 고쳐야 하는 부분
| 변환 결과 | React에서의 문제 | 수정 |
|---|---|---|
onClick={(event) => { save(); return false; }} | 코드는 화살표 함수 안에서 실행됨. this는 요소가 아니고 return false로 기본 동작이 막히지 않음 | event.currentTarget, event.preventDefault()를 쓰거나 함수를 넘기기: onClick={save} |
<input type="checkbox" checked> | onChange 없는 checked는 읽기 전용 필드가 됨 | defaultChecked |
<option selected> | React에서는 선택 상태를 <select>에서 지정 | <select defaultValue="..."> |
<textarea>hi</textarea> | <textarea>는 자식을 받지 않음 | <textarea defaultValue="hi" /> |
style="color:red !important" (출력 없음) | 변환되지 않음: React 스타일 객체는 !important를 보존할 수 없어 출력이 지워짐 | 규칙을 CSS 클래스로 옮기거나 !important를 빼기 |
| 최상위 요소가 두 개 이상 | 컴포넌트는 요소 하나만 반환 | <>...</>로 감싸기 |
<path stroke-width="2"> | SVG 속성은 변환되지 않음 | SVG → JSX 사용 |
제한 사항
- 속성 값은 그대로 둡니다. 속성 이름만 바꾸므로
href="/search?for=1&class=2"는 바뀌지 않습니다. htmltojsx도 같은 방식입니다. 값이 바뀌는 경우는 두 가지입니다.style은 객체가 되고, 이벤트 핸들러 코드는(event) => { ... }안에 들어갑니다. React에는 문자열이 아니라 함수가 필요하기 때문입니다. 그 코드 속"같은 엔티티는 디코딩합니다. DOM 이벤트가 아닌on*속성(커스텀 요소의onfoo등)은 그대로 둡니다. - 텍스트 글자는 바뀌지 않습니다. 태그 사이 텍스트의
{,},<,>는{,},<,>로 쓰고, JSX가 같은 글자로 되돌립니다. 그래서<p>{name}</p>는 변수를 읽지 않고{name}이라는 글자를 표시합니다. 그 밖의 텍스트는 그대로 남고, 문서 전체를 붙여넣으면<!DOCTYPE>,<html>,<head>,<body>도 남습니다. 컴포넌트에 넣을 부분만 붙여넣으세요. - 보존할 수 없는 스타일은 변환하지 않습니다.
!important, 같은 속성의 중복(color:red;color:blue같은 CSS 대체 값), CSS 주석, 이스케이프가 들어간 속성 이름, 닫히지 않은 따옴표나 괄호가 있으면 변환을 멈추고 출력을 지우며 복사를 끕니다. 상태 줄에는 스타일 안의 문자 위치가 나옵니다(예: 「스타일 11번째 문자를 변환할 수 없습니다: React 스타일 객체는 !important를 보존할 수 없습니다」).url(data:…;base64,…)나--accent같은 사용자 정의 속성을 포함한 다른 값은 JSON 문자열로 한 글자도 바꾸지 않고 옮깁니다. - 컴포넌트 틀은 만들지 않습니다. 출력은 마크업뿐이므로 컴포넌트의
return (...)안에 넣어 사용합니다.
FAQ
HTML → JSX 변환기는 무엇을 하나요?
표준 HTML 마크업을 유효한 React JSX 구문으로 변환합니다. 주요 변경 사항으로는 class를 className으로, for를 htmlFor로 변경하고, 인라인 스타일을 JavaScript 객체로 변환하며, 이벤트 속성을 React의 카멜케이스 이름으로 바꾸고 코드를 함수로 감싸며, 빈 요소에 명시적인 자기 닫힘 슬래시를 추가합니다.
JSX에서 class 대신 className을 사용하는 이유는?
JSX는 JavaScript로 컴파일되는데, class는 JavaScript의 예약어입니다. React는 충돌을 피하기 위해 className을 사용합니다. 변환기가 이 이름 변경을 자동으로 처리합니다.
인라인 스타일은 어떻게 변환되나요?
HTML 인라인 스타일은 문자열을 사용합니다: style="color: red; font-size: 14px". JSX는 객체가 필요하므로 style={{ "color": "red", "fontSize": "14px" }}로 출력합니다. 선언은 최상위 세미콜론에서만 나누므로 따옴표나 url(data:…) 안의 세미콜론은 값에 남습니다. --accent 같은 사용자 정의 속성은 이름 그대로 두고, 값은 한 글자도 바꾸지 않습니다. React 스타일 객체로 보존할 수 없는 경우(!important, 같은 속성 중복, CSS 주석, 닫히지 않은 따옴표나 괄호)는 변환하지 않고 출력을 지우며 복사를 끄고, 상태 줄에 문자 위치를 표시합니다.
HTML 주석은 JSX에서 어떻게 되나요?
HTML 주석(<!-- 텍스트 -->)은 JSX 표현식 주석({/* 텍스트 */})으로 변환됩니다. 이것이 React JSX 파서가 허용하는 유일한 주석 형식입니다.
데이터가 서버로 전송되나요?
아니요. 변환은 JavaScript를 사용하여 브라우저에서 완전히 실행됩니다. 데이터는 전송되지 않습니다.