DevToolBox무료
블로그

HTML → JSX 변환기

온라인으로 HTML을 React JSX로 변환. class를 className으로, style 문자열을 객체로, 자동 닫기 태그 등. 무료 즉시 변환.

HTML → JSX 변환 정보

JSX는 HTML과 유사하지만 중요한 차이가 있는 React의 구문 확장입니다. HTML 템플릿을 React 컴포넌트로 마이그레이션할 때 class를 className으로, for를 htmlFor로, 인라인 스타일 문자열을 JavaScript 객체로 변환해야 합니다. 이 도구는 이러한 변환을 모두 자동화합니다.

𝕏 Twitterin LinkedIn

이 도구 평가

4.5 / 5 · 202 개 평가

더 많은 도구

SVGSVG → JSX/ReactJSJS/HTML 포맷터&;HTML 엔티티 인코더HMHTML to Markdown

Recommended

VercelDeploy your frontend instantlyGitHub CopilotAI pair programming

최신 소식 받기

주간 개발 팁과 새 도구 알림을 받으세요.

스팸 없음. 언제든 구독 해지 가능.

Enjoy these free tools?

☕Buy Me a Coffee

사용 방법

  1. 입력 패널에 HTML 마크업 붙여넣기
  2. 변환을 클릭하여 JSX로 변환
  3. 변환된 JSX 출력 확인
  4. 복사하여 React 컴포넌트에 붙여넣기

일반적인 사용 사례

  • 정적 HTML 템플릿을 React 컴포넌트로 마이그레이션
  • 디자인 도구(Figma, Webflow)의 HTML을 JSX로 변환
  • HTML 이메일 템플릿을 React Email로 이식
  • HTML과 JSX 구문의 차이 학습

자주 묻는 질문

HTML → JSX 변환에서 뭔이 바뀌나요?
주요 변경: class → className, for → htmlFor, 인라인 스타일 문자열 → 스타일 객체, 자동 닫기 태그에 /> 추가, HTML 주석 → {/* */}.
JSX에서 class를 사용할 수 없는 이유는?
JSX에서 'class'는 JavaScript 예약어입니다. React는 'className'을 사용합니다.
인라인 스타일은 어떻게 변환되나요?
style="color: red; font-size: 16px"는 style={{color: "red", fontSize: "16px"}}로 변환됩니다.
자동 닫기 태그를 지원하나요?
예. <br>, <hr>, <img>, <input> 등의 HTML 공 요소는 <br />, <hr />로 변환됩니다.