HTML 입력

JSX 출력

HTML → JSX 변환기란?

HTML → JSX 변환기는 표준 HTML 마크업을 유효한 React JSX 구문으로 변환합니다. JSX에서는 HTML 속성이 camelCase여야 하며, class는 className으로, for는 htmlFor로 변경됩니다.

React 컴포넌트에 HTML을 직접 붙여 넣으면 구문 오류가 발생합니다. 이 도구는 모든 변환을 자동화합니다.

HTML을 JSX로 변환하는 방법

3단계로 HTML을 유효한 React JSX로 변환합니다.

HTML 붙여넣기 또는 업로드

왼쪽 패널에 HTML을 붙여넣거나 업로드를 클릭하세요.

JSX 출력 확인

class가 className으로 변환되고 빈 요소가 자기 닫힘 처리됩니다.

복사 또는 다운로드

복사 또는 다운로드로 .jsx 파일로 저장.

이 도구가 유용한 경우

정적 HTML을 React로 마이그레이션

기존 HTML 템플릿을 React 프로젝트용 JSX로 변환합니다.

디자이너 목업 사용

디자이너의 HTML 목업을 React 컴포넌트에 통합합니다.

JSX 구문 학습

알고 있는 HTML의 JSX 동등물을 즉시 확인합니다.

이메일 템플릿 변환

React Email 등의 라이브러리를 위해 HTML 이메일 템플릿을 JSX로 변환합니다.

자주 묻는 질문

왜 class가 className이 되나요?

JSX에서 속성은 JavaScript DOM 속성 이름을 사용합니다. HTML class의 DOM 속성은 className입니다.

다른 어떤 속성이 변환되나요?

for→htmlFor, tabindex→tabIndex, onclick→onClick 등.

어떤 빈 요소가 자기 닫힘 처리되나요?

<br />, <img />, <input />, <hr /> 등 모든 빈 요소.

인라인 스타일도 지원하나요?

style="color:red"는 style={{ color: "red" }}로 변환됩니다.

데이터가 저장되나요?

아니요. 모든 처리는 브라우저에서 이루어지며 서버로 전송되지 않습니다.

HTML → JSX 변환기

HTML 입력

JSX 출력