입력
작업 공간 준비 중…
사용 방법
- HTML 조각을 붙여 넣거나 UTF-8 파일 또는 예제를 여세요.
- 들여쓰기를 선택하고 JSX로 변환을 누르세요.
- 생성된 마크업을 검토하고 복사하거나 다운로드하세요.
HTML 마크업을 React로 옮기기
템플릿에서 가져온 HTML은 JSX에 넣기 전에 수정이 필요한 경우가 많습니다. 대표적인 차이는 className, htmlFor, 자체 닫기 태그와 인라인 스타일의 표현 방식입니다.
변환기는 마크업 구조를 다룹니다. 컴포넌트 상태, 이벤트 콜백과 애플리케이션 로직은 생성한 JSX를 사용하는 곳에서 직접 작성해야 합니다.
속성과 스타일 변환
className과 htmlFor 등 HTML 속성을 React 표기로 매핑합니다. 일반적인 SVG 속성도 React의 대소문자 규칙으로 처리합니다.
인라인 CSS를 스타일 객체로 변환하고 JSX 서식을 정리합니다. 텍스트 리터럴은 필요한 형태로 이스케이프하며 JavaScript 표현식으로 취급하지 않습니다.
<label class="field" for="email">Email<input id="email"></label><label className="field" htmlFor="email">Email<input id="email" /></label>속성 변환을 간단히 나타낸 예입니다. 전체 출력은 서식이 정리되고 fragment 래퍼를 포함합니다.
구조와 동작
변환 전에 HTML 조각을 파싱합니다. 출력에는 fragment 래퍼와 필요한 자체 닫기 구문이 사용됩니다.
script 요소와 인라인 이벤트 속성은 제거됩니다. 해당 동작을 React 콜백으로 바꾸거나 남은 모든 URL과 스타일이 애플리케이션에 적합하다고 보장하지는 않습니다.
결과 통합
JSX를 컴포넌트의 render 또는 return 표현식에 넣고 동작을 직접 연결하세요. 반복된 대체 스타일 선언이나 !important처럼 스타일 객체로 완전히 표현하기 어려운 인라인 스타일을 특히 확인하세요.
텍스트 입력 한도는 1 MiB입니다. CSS 및 HTML 변환은 워커에서 실행되며 제한 시간은 30초입니다. 색상 도구는 sRGB를 사용하며, 생성된 스타일은 미리 보기이므로 실제 레이아웃에서 테스트해야 합니다.
자주 묻는 질문
완전한 React 컴포넌트를 만들어 주나요?
아니요. JSX 마크업을 만듭니다. 컴포넌트, import, 데이터와 동작은 프로젝트에서 추가하세요.
script와 onclick 속성은 어떻게 되나요?
script 요소와 인라인 이벤트 속성을 제거합니다. 코드를 실행하거나 React 이벤트 핸들러로 변환하지 않습니다.
텍스트의 중괄호가 그대로 텍스트로 보이는 이유는 무엇인가요?
입력을 HTML로 파싱하기 때문입니다. 중괄호 리터럴은 실행할 표현식으로 취급하지 않고 JSX에서 표시되도록 이스케이프합니다.
인라인 스타일이 완전히 동일하게 변환되나요?
일반적인 선언은 React 스타일 속성으로 바뀝니다. 반복된 대체 선언과 !important는 JavaScript 스타일 객체로 정확히 옮기기 어려울 수 있습니다.
SVG 마크업도 변환할 수 있나요?
일반적인 SVG 속성을 React 이름으로 매핑합니다. ID, 참조와 애플리케이션별 속성을 포함해 컴포넌트에서 결과를 테스트하세요.