HTML to JSX 변환기
무료 온라인 HTML to JSX 변환기. HTML을 붙여넣으면 className, htmlFor, 카멜케이스 style 객체, 자기 닫기 태그, 안전한 주석 처리가 된 React JSX가 즉시 만들어집니다. 브라우저에서 전부 처리됩니다.
HTML to JSX 변환기는 무엇을 하나요?
일반 HTML 마크업을 React가 렌더링할 수 있는 JSX로 바꿔 줍니다. 입력 영역에 HTML을 붙여넣으면 출력 패널에 같은 의미의 JSX가 나타나고, 짧은 디바운스 후 입력에 맞춰 실시간으로 갱신됩니다.
어떤 속성 이름이 바뀌나요?
class는 className으로, for는 htmlFor로, tabindex는 tabIndex로 바뀌고, maxlength·colspan·stroke-width 같은 하이픈 속성도 React의 카멜케이스 이름으로 변환됩니다. data-*와 aria-* 속성은 그대로 유지됩니다.
style 속성은 어떻게 변환되나요?
style="background-color: red; font-size: 12px" 같은 CSS 문자열은 JavaScript 객체 style={{backgroundColor:'red', fontSize:'12px'}}로 바뀝니다. 모든 CSS 속성은 카멜케이스로 바뀌고 값은 문자열 따옴표로 감싸집니다.
void 요소는 어떻게 처리되나요?
img, br, input, hr, meta, link처럼 자식을 가질 수 없는 요소는 자기 닫기 문법으로 정규화되어 <img>가 <img />가 됩니다. 이는 JSX의 필수 규칙이며 빈 div와 span도 같은 방식으로 닫힙니다.
HTML 주석은 어떻게 되나요?
JSX 주석으로 변환됩니다. <!-- note -->는 {/* note */}가 됩니다. 주석을 조기 종료시킬 수 있는 문자열은 무력화되므로 생성된 코드는 항상 컴파일됩니다.
엔티티와 특수문자는 어떻게 처리되나요?
&, © 같은 엔티티는 실제 문자로 디코딩된 뒤, 중괄호와 꺾쇠괄호는 JSX에 안전한 형태로 다시 이스케이프됩니다. { }나 <가 포함된 텍스트도 컴포넌트를 깨뜨리지 않고 올바르게 렌더링됩니다.
함수 컴포넌트 옵션은 무엇인가요?
변환된 마크업을 바로 쓸 수 있는 템플릿 function Component() { return ( ...JSX... ) }로 감쌉니다. 결과를 React 파일에 곧바로 붙여넣고 싶을 때 켜세요.
HTML이 서버로 전송되나요?
아니요. 파싱은 브라우저 내장 DOMParser만으로 완전히 로컬에서 이루어지며 서버로는 아무것도 전송되지 않습니다. 비공개 마크업도 안전하고 오프라인에서도 동작합니다.
HTML to JSX 변환기 사용 방법
브라우저를 떠나지 않고 일반 HTML을 바로 쓸 수 있는 React JSX로 변환하세요. 모든 해석은 내장 DOMParser로 로컬에서 이루어지며 마크업은 절대 업로드되지 않습니다.
- 왼쪽 편집기에 HTML을 붙여넣으세요. 오른쪽에 JSX 결과가 나타나고 입력에 따라 갱신됩니다(300ms 디바운스).
- "들여쓰기"에서 들여쓰기 폭을 고르세요. 중첩 단계마다 2 또는 4칸입니다.
- "함수 컴포넌트"을 켜면 출력이 function Component() { return ( ... ) }로 감싸져 React 파일에 바로 붙여넣을 수 있습니다.
- 복사로 결과를 가져오고, 예제로 샘플을 불러오고, 지우기로 새로 시작하세요.
class, for, tabindex는 className, htmlFor, tabIndex로 바뀌고, style 문자열은 카멜케이스 객체가 되며, img나 br 같은 void 요소는 자기 닫힘 태그로 출력됩니다. 바로 JSX가 기대하는 형태입니다.
관련 도구
- HTML 정리기 HTML 코드를 즉시 포맷하고 정리합니다. 압축된 HTML을 깔끔하고 읽기 쉬운 코드로 변환합니다. 무료 온라인 도구, 가입 불필요.
- 코드를 이미지로 구문 강조, 사용자 정의 테마, 창 장식으로 코드 스니펫을 공유 가능한 이미지로 변환. 100% 개인정보 보호, 브라우저에서 완전히 실행.
- 파일 해시 MD5, SHA-1, SHA-256, SHA-512 파일 해시 로컬 계산 및 검증
- Chmod 계산기 체크박스 포함 Linux 파일 권한을 시각화하고 계산하는 무료 온라인 chmod 계산기. 숫자(755, 644)와 기호 표기법(rwxr-xr-x)을 즉시 변환. setuid, setgid, sticky bit 같은 특수 권한 지원.
- ASCII 코드표 10진수, 16진수, 8진수, 2진수 코드, HTML 엔티티 및 문자 설명을 포함한 완전한 ASCII 문자 인코딩 참조. 즉시 검색 및 필터링.
- Hex 뷰어 검색, 오프셋 탐색 및 가상 스크롤링으로 파일 내용을 헥스 덤프 형식으로 보기
- MIME 유형 조회 파일 확장자로 MIME 유형을 즉시 찾거나 MIME 유형으로 확장자를 조회하세요. 1000개 이상의 항목을 담은 무료 온라인 참조 도구.
- 화면 해상도 확인 화면 해상도, 뷰포트 크기, DPI, 색 심도를 실시간으로 감지합니다.