HTML → JSX 변환기
HTML을 JSX로 변환합니다 — class→className, for→htmlFor, 인라인 style 문자열→객체, void 요소는 self-close 처리하며 브라우저 내장 HTML 파서를 사용합니다.
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 안의 공백과 줄바꿈 없는 공백도 같은 이유로 그대로 둡니다.
최상위 요소가 여러 개면요?
루트 요소가 둘 이상이면 컴포넌트에서 그대로 반환할 수 있도록 결과를 프래그먼트(<>…</>)로 감쌉니다.
결과를 바로 쓸 수 있는 컴포넌트로 받을 수 있나요?
네. ‘컴포넌트로 감싸기’를 켜고 이름을 적으면 JSX가 export된 함수 컴포넌트 안에 담겨 나오고, 내려받는 파일 이름도 그 이름을 따릅니다.
style·script 블록은 어떻게 되나요? 들여쓰기나 따옴표도 바꿀 수 있나요?
텍스트가 아니라 코드로 옮깁니다. 스타일시트는 원래 모습 그대로 템플릿 리터럴에 담겨 CSS처럼 읽히고, 스크립트는 자바스크립트 문자열 하나로 담기므로 중괄호가 이스케이프되거나 공백이 합쳐지지 않습니다. ‘컴포넌트로 감싸기’ 옆의 들여쓰기에서 공백 칸 수나 탭을, 속성 따옴표에서 큰따옴표나 작은따옴표를 고를 수 있습니다. 들여쓰기는 가장 적은 공백 칸 수로, 속성 따옴표는 큰따옴표로 시작하고, 컴포넌트로 감쌀 때도 같은 들여쓰기를 씁니다. 속성 값에 고른 따옴표가 들어 있으면 문자열 식으로 써서 JSX가 깨지지 않게 합니다.
대문자 태그나 값 없이 쓴 속성도 처리하나요?
네. 태그와 속성 이름은 소문자로 읽으므로 <DIV CLASS="a">는 <div className="a">가 되고, disabled나 required처럼 켜고 끄는 속성을 값 없이 썼다면 JSX에서도 값 없이 남아 <input disabled>는 <input disabled />가 됩니다.
HTML이 깨져 있으면요?
브라우저 자체 HTML 파서가 읽으면서 페이지에서처럼 고칩니다. 닫히지 않은 태그는 닫고, 잘못 겹친 서식 태그는 다시 만들고, 짝이 없는 닫는 태그는 무시합니다. JSX는 그렇게 고친 마크업에서 변환되고, 결과 아래 안내에 파서가 닫거나 추가하거나 무시한 태그를 그 태그가 있는 줄과 함께 보여 줍니다. 그 줄은 태그가 있는 곳이지 실수한 곳이 아닙니다 — 파서도 그것은 알 수 없습니다. 암시된 <tbody>처럼 파서가 직접 만든 요소에는 줄이 없습니다.