Output will appear here...
HTML → JSX 변환 정보
JSX는 HTML과 유사하지만 중요한 차이가 있는 React의 구문 확장입니다. HTML 템플릿을 React 컴포넌트로 마이그레이션할 때 class를 className으로, for를 htmlFor로, 인라인 스타일 문자열을 JavaScript 객체로 변환해야 합니다. 이 도구는 이러한 변환을 모두 자동화합니다.
Key Features
- Convert class attributes to className
- Convert for attributes to htmlFor for labels
- Transform style strings to style objects
- Handle event handlers (onclick → onClick)
- Support data-* attributes (pass-through)
- 100% client-side — your code stays private
자주 묻는 질문
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 />로 변환됩니다.
이 도구 평가
4.5 / 5 · 202 개 평가
최신 소식 받기
주간 개발 팁과 새 도구 알림을 받으세요.
스팸 없음. 언제든 구독 해지 가능.
Enjoy these free tools?
☕Buy Me a Coffee사용 방법
- 입력 패널에 HTML 마크업 붙여넣기
- 변환을 클릭하여 JSX로 변환
- 변환된 JSX 출력 확인
- 복사하여 React 컴포넌트에 붙여넣기
일반적인 사용 사례
- 정적 HTML 템플릿을 React 컴포넌트로 마이그레이션
- 디자인 도구(Figma, Webflow)의 HTML을 JSX로 변환
- HTML 이메일 템플릿을 React Email로 이식
- HTML과 JSX 구문의 차이 학습