HTML → JSX 변환기

HTML 마크업을 React JSX에서 쓰기 좋은 속성명과 스타일 형식으로 변환합니다.

카테고리: 변환 도구

언제 사용하나요?

디자이너나 외부 소스에서 받은 HTML 코드를 React 컴포넌트에 붙여넣기 전에 JSX 문법으로 변환해야 할 때 사용합니다. class → className, for → htmlFor 등을 자동으로 처리합니다.

사용 방법

HTML 코드를 입력합니다.
JSX 형식으로 변환된 결과가 표시됩니다.
변환된 JSX를 복사해 React 컴포넌트에 사용합니다.

입력값 안내

React나 Next.js 등에 붙여넣을 순수 HTML 마크업 코드를 입력합니다.

계산·변환 기준

HTML 문자열을 파싱한 뒤 React JSX 문법 규칙에 맞게 속성명을 카멜케이스(camelCase)로 전역 치환(replace)합니다. 주요 치환 대상은 `class` → `className`, `for` → `htmlFor`, 인라인 `style="color:red"` → `style={{color:"red"}}` 등입니다.

사용 예시

HTML 샘플 React 적용 - class, for, style 같은 HTML 속성을 JSX 문법으로 바꿉니다.
디자인 시안 코드 정리 - 복사한 HTML 조각을 React 컴포넌트에 넣기 전 정리합니다.
레거시 마크업 이전 - 예전 HTML 코드를 React 프로젝트로 옮길 때 JSX 문법으로 변환합니다.

예시

<div class="container" for="input"> → <div className="container" htmlFor="input">
onclick 속성이 있는 HTML → onClick 카멜케이스 속성의 JSX로 변환

주의사항

잘못된 형식의 소스 데이터 입력 시 파싱 에러가 발생하거나 결과 레이아웃이 깨질 수 있습니다.
인코딩 표준(UTF-8)이 맞지 않거나 복잡한 중첩 구조를 가진 소스 데이터를 변환할 경우 데이터 구조가 깨지거나 누락될 수 있습니다.

계산·사용 가이드

HTML과 JSX 속성 차이

JSX에서는 class가 className으로, for가 htmlFor로 바뀌는 등 React 문법에 맞춘 속성명이 필요합니다.

자동 변환 후 확인

복잡한 이벤트 속성, 인라인 스타일, SVG 속성은 자동 변환 후에도 직접 확인하는 것이 좋습니다.

자주 묻는 질문

class 속성은 어떻게 변환되나요?

React JSX에서 사용하는 className으로 변환됩니다.

인라인 style도 처리하나요?

네, style 문자열을 JSX 객체 표기 형태로 변환합니다.

주석도 변환되나요?

HTML 주석은 JSX에서 쓰는 중괄호 주석 형태로 바꿔야 합니다.

자체 닫힘 태그는 어떻게 되나요?

JSX는 모든 태그를 닫아야 하므로 br, img 같은 태그가 자체 닫힘 형태로 변환됩니다.