HTML → JSX 변환기
HTML을 React/Preact JSX로 변환 — class→className, style 객체, void 태그 self-close. 100% 브라우저.
class → className, for → htmlFor, 인라인 style → 객체, void 태그 self-close, 주석 → {/* */}.
🔒 브라우저에서 실행되며 업로드되지 않습니다.
HTML을 JSX로 변환
일반 HTML을 붙여넣으면 React·Preact 컴포넌트에 바로 넣을 수 있는 JSX를 얻습니다. 속성을 JSX 대응으로 변환(class→className, for→htmlFor, 이벤트 핸들러 camelCase)하고, 인라인 style 문자열을 스타일 객체로 바꾸며, <img>·<br> 같은 void 요소를 self-close하고, HTML 주석을 {/* … */}로 바꿉니다.
변환은 브라우저 자체 HTML 파서로 마크업을 파싱해 순회하므로 중첩을 올바르게 처리하고, 전 과정이 기기에서 실행되며 업로드가 없습니다.
자주 묻는 질문
data-·aria- 속성은 유지되나요?
네. data-*·aria-* 속성은 JSX에서 그대로 유효하므로 변경 없이 전달됩니다.
출력에 {' '} 가 섞여 나오는 이유는?
안 넣으면 사라지는 한 칸입니다. JSX는 각 줄 양끝의 공백을 버리기 때문에, 인라인 요소 옆의 공백은 식으로 써 두지 않으면 문장 가운데 링크가 들어간 자리에서 앞뒤 단어가 붙어 버립니다. pre 안의 공백과 줄바꿈 없는 공백도 같은 이유로 그대로 둡니다.
최상위 요소가 여러 개면요?
루트 요소가 둘 이상이면 결과가 프래그먼트(<>…</>)로 감싸여 컴포넌트에서 반환하기에 유효합니다.
HTML이 업로드되나요?
아니요. 파싱과 변환이 전부 브라우저에서 이뤄집니다.