HTML을 JSX로 변환기
HTML을 JSX로 무료 온라인 변환기, 설치 불필요. HTML 코드를 React JSX 형식으로 변환합니다.
HTML to JSX 정보
표준 HTML을 React용 JSX 호환 마크업으로 다시 작성합니다. 빈 요소를 닫고, 예약된 속성을 React에 해당하는 이름으로 변경하며, 인라인 style 문자열을 camelCase 속성 이름을 가진 style 객체 구문으로 변환하고, 불리언 속성을 React 형식으로 정규화합니다.
사용 방법
1. 입력 상자에 HTML을 붙여넣습니다. 2. 변환을 클릭하여 출력 상자에 JSX를 생성합니다. 3. 복사를 사용하여 결과를 React 컴포넌트로 복사합니다.
속성 및 스타일 재작성
자기 닫는 태그(img, br, hr, input, meta, link, area, base, col, embed, source, track, wbr)는 />로 닫힙니다. class=는 className=이 되고, for=는 htmlFor=가 됩니다. style="..." 문자열은 style={{...}}가 되며, 케밥 케이스 속성은 camelCase로 변환되고(font-family -> fontFamily), float -> cssFloat가 됩니다. checked, disabled, readonly, required, autoplay, autofocus 같은 불리언 속성은 정규화됩니다(readOnly, autoPlay, autoFocus).
▶빈 요소가 자동으로 닫히나요?
네. img, br, hr, input, meta, link, area, base, col, embed, source, track, wbr는 원본 HTML에서 어떻게 표기되었든 자기 닫는 형태(<img ... />)로 다시 작성됩니다.
▶인라인 스타일은 어떻게 처리되나요?
style="font-size: 14px;" 속성은 style={{fontSize: 14px}}로 변환됩니다. 하이픈으로 구분된 CSS 속성은 camelCase React 스타일 키가 되며, 특수 케이스인 float와 font-family는 cssFloat와 fontFamily로 매핑됩니다.
▶class를 className으로 변환하나요?
네. 모든 class= 속성은 className=으로 이름이 바뀌고, (레이블에 사용되는) for= 속성은 htmlFor=가 되어 React의 예약어 규칙을 따릅니다.
▶HTML의 유효성을 검사하나요?
아니요. 변환기는 정규식 기반 치환을 적용하며 문서 트리를 파싱하지 않으므로, 잘못된 HTML은 변경 없이 그대로 통과합니다. 변환 전에 입력이 잘 형성되어 있는지 확인하세요.
이 도구가 당신에게 도움이 되었다면, 저에게 커피 한 잔 사주세요.
제게 커피 한 잔 사주세요.