HTML → JSX 변환기
모든 도구
무료
HTML을 붙여넣으면 깔끔한 React JSX를 얻습니다 — class는 className으로, 속성은 camelCase로, style 문자열은 객체로 바뀌고 태그는 자동으로 닫힙니다. 전부 브라우저에서 실행됩니다. 무료.
모든 작업이 브라우저에서 실행됩니다 — 마크업이 기기를 벗어나지 않습니다.
1
{ }
JSX가 여기에 표시됩니다
HTML → JSX 변환기 소개
HTML to JSX 변환기는 일반 HTML 마크업을 실시간으로 React용 JSX로 바꿔줍니다. class를 className으로, for를 htmlFor로 바꾸고, 케밥 케이스와 SVG 속성을 카멜케이스로 변환하며, 인라인 style 문자열을 JSX style 객체로 바꾸고, img나 br 같은 빈 요소를 자동으로 자체 닫힘 처리합니다 — 원래는 직접 손으로 해야 했을 바로 그 작업들입니다.
스니펫이나 전체 페이지 섹션, 디자인 도구에서 내보낸 마크업을 붙여넣으면 입력하는 동안 JSX 창이 구문 강조와 함께 실시간으로 업데이트됩니다. 선택적 래퍼를 사용하면 결과물을 이름이 지정된 함수 컴포넌트로 만들어 주므로, 추가 편집 없이 바로 React 프로젝트에 넣을 수 있습니다.
이 변환기는 완전히 클라이언트 사이드에서 동작하는 HTML to JSX 도구입니다: 마크업은 브라우저 안 JavaScript로 변환되며 기기 밖으로 나가지 않으므로, 독점 템플릿이나 내부 페이지에도 안전하게 사용할 수 있습니다.
HTML → JSX 변환기 사용 방법
- 왼쪽 창에 HTML을 붙여넣거나, 샘플을 클릭해 예시를 불러오세요.
- 입력하거나 수정하는 동안 JSX 창이 즉시 업데이트되는 것을 확인하세요.
- 완성된 함수 컴포넌트를 원한다면 "컴포넌트로 감싸기"를 켜고 컴포넌트 이름을 설정하세요.
- 복사를 클릭해 JSX를 가져오거나, 다운로드를 눌러 Component.jsx로 저장하세요.
- 초기화를 사용해 양쪽 창을 비우고 다른 스니펫을 변환하세요.
자주 묻는 질문
class를 className으로, for를 htmlFor로 이름을 바꾸고, 대시로 이어진 속성(SVG 속성 포함)을 카멜케이스로 바꾸며, 인라인 style 문자열을 JSX style 객체로 변환하고, img, br, input 같은 빈 태그를 자체 닫힘 처리하여 결과물이 유효한 JSX가 되도록 합니다.
네. "컴포넌트로 감싸기"를 활성화하고 컴포넌트 이름을 선택하면, 변환된 마크업을 감싸는 완전한 함수 컴포넌트가 생성되어 프로젝트에 바로 붙여넣거나 .jsx 파일로 다운로드할 수 있습니다.
네. style="margin-top: 10px" 같은 style 속성은 style={{marginTop: '10px'}}와 같은 JSX 객체로 바뀌며, 벤더 접두사가 붙은 속성을 포함해 각 CSS 속성이 카멜케이스로 변환됩니다.
아니요. 변환은 전적으로 브라우저 안에서 이루어지므로 마크업이 기기 밖으로 나가지 않습니다. 내부 템플릿이나 미공개 페이지도 안전하게 변환할 수 있습니다.
네, 완전히 무료입니다. 계정도, 크레딧 비용도, 변환 스니펫 수 제한도 없습니다.
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.