HTML → JSX 변환기
개인정보 보호 설계 — 브라우저에서 모두 처리됩니다
왼쪽에 HTML 을 붙여 넣고 오른쪽에서 React 용 JSX 를 복사하세요. 변환기는 class 를 className, for 를 htmlFor 로 바꾸고 인라인 style 문자열을 camelCase 객체로 만들며, img 나 input 같은 void 요소를 자동으로 자가 종료해 JSX 가 파싱할 수 있게 합니다.
속성과 이벤트 매핑
React 는 HTML 속성 이름이 아닌 DOM 프로퍼티 이름을 사용합니다. 그래서 tabindex 는 tabIndex, readonly 는 readOnly, colspan 은 colSpan 으로 바뀝니다. 인라인 핸들러는 onclick 에서 onClick, onmouseover 에서 onMouseOver 처럼 모든 표준 핸들러가 camelCase 가 됩니다. HTML 만의 두 가지 이름 변경은 class → className 과 for → htmlFor 인데, 둘 다 JavaScript 의 예약어이기 때문입니다.
style 문자열을 camelCase 객체로
JSX 는 인라인 스타일을 객체 리터럴로 받고 각 CSS 속성도 camelCase 여야 합니다. padding: 1rem; background-color: #fff 같은 문자열은 style={{ padding: '1rem', backgroundColor: '#fff' }} 로 변환됩니다. 변환기는 kebab-case → camelCase, 벤더 프리픽스 (-webkit-, -moz-, -ms-), CSS 커스텀 프로퍼티 (--brand-color 는 필요할 때 문자열 키로 유지) 를 처리합니다.
개인 정보와 경계 사례
변환은 이 탭의 단일 JavaScript 함수 안에서 이루어집니다. HTML 이 브라우저 밖으로 나가지 않으므로 고객 데이터를 포함한 마크업을 옮길 때도 안심하고 쓸 수 있습니다. HTML 의 14 개 void 요소 (img, input, br, hr, meta, link, area, base, col, embed, source, track, wbr, param) 는 자가 종료 형태로 출력되어 JSX 가 받아들이고, data- 와 aria- 속성은 JSX 에서 그대로 유효하므로 변경 없이 유지됩니다.
자주 묻는 질문
- 어떤 속성이 이름을 바꾸나요?
- class → className, for → htmlFor, tabindex → tabIndex, readonly → readOnly, colspan → colSpan 외에 모든 표준 DOM 프로퍼티와 on* 핸들러가 camelCase 로 바뀝니다.
- style 문자열은 어떻게 변환되나요?
- 세미콜론으로 나누고 각 CSS 속성을 camelCase 로 바꾼 뒤 이중 중괄호의 JSX 객체로 출력합니다. 벤더 프리픽스와 커스텀 프로퍼티는 유지됩니다.
- data-* 와 aria-* 도 바뀌나요?
- 아니요. JSX 가 kebab 형태를 그대로 받기 때문에 변환기는 손대지 않습니다. 표준 DOM 속성만 camelCase 로 변환됩니다.
- HTML 주석도 변환되나요?
- 네. <!-- 주석 --> 은 {/* 주석 */} 로 바뀌어 의도는 유지하면서 파서를 깨뜨리지 않습니다.
- 스크립트와 인라인 핸들러는요?
- 변환기는 onclick 을 onClick 등으로 이름만 바꾸고 함수 본문은 문자열로 남깁니다. 보통 출시 전에 진짜 React 콜백으로 다시 작성합니다.
- 내 HTML 이 어딘가로 전송되나요?
- 아니요. 변환은 전적으로 이 브라우저 탭에서 수행됩니다. Toova 는 붙여 넣은 내용을 보지 못하며 애널리틱스와 로그도 없습니다.