HTML에서 JSX로 변환기
HTML → JSX// JSX output appears here
왜 HTML을 JSX로 변환해야 하나요?
기존 HTML 템플릿을 React로 마이그레이션할 때 class를 className으로, for를 htmlFor로, 인라인 스타일을 문자열에서 JavaScript 객체로 수동 변환해야 합니다. 저희 도구는 이러한 변환을 모두 즉시 자동화하여 컴포넌트 로직에 집중할 수 있게 합니다.
속성 변환
class→className, for→htmlFor, tabindex→tabIndex, maxlength→maxLength 등 변환
인라인 스타일 객체
style="color: red;"를 style={{color: 'red'}}로 변환 — React의 JS 객체 표기법
자기 닫힘 태그
빈 요소에 닫힘 슬래시 추가: <br>이 <br />로, <input>이 <input />로
3단계로 HTML을 JSX로 변환하는 방법
HTML 붙여넣기
HTML 템플릿, Figma 내보내기, 또는 HTML 스니펫을 왼쪽 패널에 붙여넣기
자동 변환
변환기가 모든 속성, 스타일, 빈 요소를 JSX 구문으로 즉시 변환
JSX 복사
변환된 JSX를 복사하여 React 컴포넌트의 render/return 블록에 붙여넣기
HTML에서 JSX로 변환기 사용 사례
React로 마이그레이션
속성 수동 변환 없이 기존 HTML 페이지나 템플릿을 React 컴포넌트로 마이그레이션
React에서 Bootstrap
Bootstrap HTML 컴포넌트를 JSX로 변환하여 react-bootstrap이나 스타일드 컴포넌트와 함께 사용
이메일 템플릿
HTML 이메일 템플릿을 React Email 또는 관련 라이브러리로 렌더링하기 위한 JSX로 변환
CMS에서 React로
WordPress 또는 전통적인 CMS의 HTML 템플릿을 React 컴포넌트 구조로 변환
HTML에서 JSX로 변환 팁
✓ class → className은 중요
class는 JavaScript 예약 키워드입니다. React에서는 CSS 클래스에 className을 사용해야 합니다. 잊으면 React 경고와 예상치 못한 동작이 발생합니다.
✓ label의 for → htmlFor
<label>의 for 속성은 JSX에서 htmlFor가 됩니다. 이를 잊으면 접근성이 깨집니다 — 스크린 리더는 레이블-필드 연결에 의존합니다.
✓ 변환 후 이벤트 핸들러 업데이트
HTML 속성 onclick='...'은 JSX에서 자동 변환되지 않습니다. 변환 후 인라인 이벤트 핸들러를 수동으로 React의 onClick={handler} 패턴으로 교체하세요.
✓ HTML 주석은 JSX 주석이 됨
<!-- 주석 -->은 JSX에서 {/* 주석 */}으로 변환됩니다. JSX는 JSX 태그 내에서 HTML 주석 구문을 지원하지 않습니다.
❓ 자주 묻는 질문
왜 React는 class 대신 className을 사용하나요?
class는 JavaScript 예약 키워드(ES6 클래스에 사용)입니다. JSX가 JavaScript이기 때문에 class를 사용하면 구문 충돌이 생깁니다. React는 JavaScript의 class 예약어와의 모호성을 피하기 위해 className을 선택했습니다.
이 도구는 React 이벤트 핸들러를 처리하나요?
아니요 — HTML 이벤트 핸들러 onclick, onsubmit 등은 React의 onClick, onSubmit 등으로 자동 변환되지 않습니다. 해당 값(HTML의 JavaScript 문자열)은 React 컴포넌트의 함수/상태를 참조해야 합니다. 수동 업데이트가 필요합니다.
HTML과 JSX의 차이는 무엇인가요?
JSX는 HTML과 유사한 JavaScript 구문 확장으로 React.createElement() 호출로 컴파일됩니다. 주요 차이점: 모든 속성이 camelCase, class는 className, for는 htmlFor, 빈 요소는 자기 닫힘 필요, 표현식은 문자열 대신 {} 사용.
왜 JSX에서 빈 요소는 자기 닫힘이 필요한가요?
JSX는 Babel에 의해 XML과 유사한 구문으로 파싱되며 모든 요소의 올바른 닫힘이 필요합니다. <br>, <img>, <input> 등의 빈 요소는 자식이 없으므로 닫히지 않은 태그 대신 />의 자기 닫힘이 필요합니다.