HTML to JSX
HTML 마크업을 React의 JSX 구문으로 변환하며 속성, 인라인 스타일, 빈 요소를 자동 변환합니다.
적용된 변환:
class→classNamefor→htmlForstyle="..."→style={{...}}- 공 요소 (br, hr, img, input) 자체 닫음
- HTML 주석이 {/* */}로 변환됨
이 도구 소개
HTML to JSX는 표준 HTML 마크업을 React 애플리케이션용 유효한 JSX 문법으로 변환하는 도구입니다. React 컴포넌트를 개발할 때 HTML 스니펫을 JSX 형식으로 변환해야 하는 경우가 많은데, 이는 속성 이름 변경(class에서 className으로), 인라인 스타일 처리 방식 변경(문자열에서 객체로), void 요소 적응이 필요합니다. 이 도구는 이러한 변환을 자동화하여 시간을 절약하고 수동 변환 오류를 줄입니다.
도구를 사용하려면 입력 상자에 HTML 코드를 붙여넣고 "변환"을 클릭하세요. 변환기는 즉시 유효한 JSX 출력을 생성하여 React 컴포넌트에 직접 복사할 수 있습니다. HTML 이벤트 핸들러(onclick에서 onClick으로), 부울 속성(checked, disabled), 데이터 속성, CSS 클래스 이름 등의 일반적인 변환을 처리합니다. 일반적인 사용 사례로는 기존 HTML 템플릿을 React로 마이그레이션하기, 써드파티 HTML 스니펫 통합, 또는 목업에서 컴포넌트 JSX를 빠르게 생성하는 것들이 있습니다.
변환기는 브라우저에서 완전히 작동하므로 서버 업로드가 없어 코드가 비공개로 유지됩니다. 복잡한 동적 템플릿이나 조건부 렌더링 로직은 변환 후에도 수동 조정이 필요할 수 있습니다. 복잡한 상태 관리나 커스텀 로직이 있는 컴포넌트의 경우, 생성된 JSX는 추가로 개선할 수 있는 견고한 시작점으로 작동합니다.
자주 묻는 질문
코드 구현
import re
def html_to_jsx(html: str) -> str:
jsx = html
# class -> className
jsx = re.sub(r'\bclass=', 'className=', jsx)
# for -> htmlFor
jsx = re.sub(r'\bfor=', 'htmlFor=', jsx)
# HTML comments to JSX
jsx = re.sub(r'<!--(.*?)-->', r'{/*\1*/}', jsx, flags=re.DOTALL)
# Self-close void elements
void_elements = ['area','base','br','col','embed','hr','img','input',
'link','meta','param','source','track','wbr']
for tag in void_elements:
jsx = re.sub(
rf'<{tag}(\s[^>]*)?>',
lambda m: m.group(0)[:-1] + ' />' if not m.group(0).endswith('/>') else m.group(0),
jsx, flags=re.IGNORECASE
)
return jsx
html = '<div class="container"><br><img src="x.png" alt=""></div>'
print(html_to_jsx(html))
# <div className="container"><br /><img src="x.png" alt="" /></div>Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.