HTML to JSX 변환기는 무엇을 하나요?

표준 HTML 마크업을 유효한 React JSX 문법으로 변환합니다. 주요 변환으로는 class→className, for→htmlFor, 인라인 style 문자열을 JavaScript 객체로, void 요소 자동 셀프 클로징, onclick 같은 HTML 이벤트를 onClick 같은 React 이벤트로 변환 등이 있습니다.

React에서 class 대신 className을 사용하는 이유는 무엇인가요?

JSX는 JavaScript로 컴파일되는데, class는 JavaScript의 예약어이기 때문입니다. 충돌을 피하기 위해 React는 CSS 클래스 속성에 className을 사용합니다. 마찬가지로 for도 JavaScript for 루프의 예약어라 htmlFor를 사용합니다.

인라인 스타일도 올바르게 변환되나요?

네. style="color: red; font-size: 16px" 같은 HTML 인라인 스타일은 JSX 객체 문법인 style={{ color: 'red', fontSize: '16px' }}로 변환됩니다. CSS 속성 이름은 자동으로 camelCase로 변환됩니다.

변환된 JSX를 바로 React 컴포넌트에 사용할 수 있나요?

대부분의 경우 가능하지만, 복잡한 중첩 구조나 SVG 요소 등 경우에 따라 추가 검토가 필요할 수 있습니다. 항상 실제 컴포넌트에서 테스트해 보세요.

HTML 코드가 서버로 전송되나요?

아니요. 모든 변환은 브라우저에서 JavaScript로 처리됩니다. HTML 코드가 기기 밖으로 전송되지 않아 완벽한 개인정보 보호가 보장됩니다.

HTML → JSX 변환기

HTML을 React JSX로 즉시 변환합니다. class를 className으로, 인라인 스타일을 객체로, void 요소를 셀프 클로징으로 변환합니다.

HTML 입력0 글자

JSX 출력0 글자

사용 방법

HTML을 React JSX로 즉시 변환합니다. class를 className으로, 인라인 스타일을 객체로, void 요소를 셀프 클로징으로 변환합니다.

1왼쪽 입력 패널에 HTML 코드를 붙여넣으세요.
2오른쪽 패널에 JSX 출력이 자동으로 나타납니다.
3변환된 JSX를 검토하세요 — className, htmlFor, 이벤트 핸들러를 확인하세요.
4복사 버튼을 클릭하여 JSX를 클립보드에 복사하세요.
5예제 붙여넣기 버튼으로 변환 데모를 확인할 수 있습니다.

주요 기능

class → className, for → htmlFor 자동 변환
인라인 style 문자열을 JavaScript 스타일 객체로 변환
void 요소 자동 셀프 클로징: <img />, <input />, <br />, <hr />
HTML 주석을 JSX {/* 주석 */} 문법으로 변환
HTML 이벤트 속성 camelCase 변환 (onclick → onClick)

자주 묻는 질문

더 알아보기

HTML to JSX: 모든 React 입문자가 걸려 넘어지는 변환