HTML → JSX 변환
HTML 스니펫 붙여넣기 → React용 JSX. class→className·onclick→onClick·void 태그 self-close·inline style 객체화 옵션.
<>
<div className="container">
<label htmlFor="email">Email</label>
<input type="email" id="email" required />
<button onClick="submit()" tabIndex="0" style={{ color: '#fff', backgroundColor: 'rebeccapurple', fontSize: '14px' }}>
Send
</button>
{/* footer */}
<p className="muted">By signing up you agree to our <a href="/terms">terms</a>.</p>
</div>
</>인용된 문자열 속성 값은 문자열 유지; JS 표현식이 필요하면 복사 후 JSX에서 직접 변경.
사용법
- HTML 스니펫 붙여넣기.
- React 컴포넌트의 단일 루트가 필요하면 fragment wrap 옵션 켜기.
- JSX를 컴포넌트 파일에 복사.
자세한 설명
펼치기접기
HTML을 리액트 컴포넌트로 옮길 때의 지루한 작업을 대신 써 주는 직접 구현 변환기입니다. 속성 이름 변경(class, for, tabindex 등), 인라인 이벤트 핸들러의 대문자화(onclick → onClick), 빈 태그의 자기 닫기(<br> → <br />), HTML 주석을 JSX 주석으로, 그리고 선택적으로 style="color: red; font-size: 14px"를 style={{ color: 'red', fontSize: '14px' }} 객체 리터럴로 바꿉니다.
이 다섯 가지 변환이 붙여 넣기에 필요한 대부분을 덮으며, 그중 빈 태그 처리가 컴파일되는 출력과 그렇지 않은 출력을 가릅니다. JSX는 모든 요소가 닫혀 있기를 요구하므로, 닫히지 않은 <img>나 <input>은 브라우저처럼 파서가 고쳐 주는 대상이 아니라 문법 오류입니다. 주석도 같은 이유로 중요합니다. <!-- … -->는 JSX 안에서 유효하지 않아 {/* … */}가 되어야 합니다.
스타일 변환은 문자열을 객체로 바꾸므로 값이 자바스크립트가 되고 몇 가지가 동작하지 않게 됩니다. CSS 사용자 지정 속성은 하이픈이 붙은 이름을 유지해 따옴표로 감싸야 하고, !important는 객체 형태로 아예 표현할 수 없으며, 객체 안의 단위 없는 숫자는 대부분의 속성에서 픽셀로 취급되지만 line-height나 z-index에서는 그렇지 않습니다. 선언이 특이한 일을 하고 있다면 인라인 스타일을 클래스로 두는 편이 변환보다 대개 깔끔합니다.
이 변환기가 하지 않는 일은 마크업을 컴포넌트로 만드는 것입니다. 문법을 바꿀 뿐이라 onclick 속성은 onClick이 되지만 그 값은 함수 참조가 아니라 문자열로 남고, 주변 페이지에 기대고 있던 것들, 즉 스크립트나 폼의 기본 제출 동작, 다른 곳에서 참조하는 id 같은 것은 여전히 여러분의 판단이 필요합니다. HTML에 남아 있는 서버 렌더링 템플릿 문법은 글자 그대로 통과합니다.
파싱은 완전한 HTML 파싱이 아니라 텍스트 기반이라, 심하게 망가진 입력에는 혼란스러워할 수 있습니다. 큰 덩어리를 붙여 넣었다면 믿기 전에 컴파일되는지 확인하십시오.
자주 묻는 질문
어떤 속성이 이름 변경됨?
React가 이름 바꾸는 모든 것: class·for·tabindex·readonly·maxlength·contenteditable·spellcheck·autocomplete·autofocus·enctype·crossorigin·srcset·rowspan·colspan·usemap·datetime + 모든 on… 이벤트 핸들러. aria-·data- 속성은 kebab-case 유지.
inline style에 CSS 변수가 있으면?
--로 시작하는 프로퍼티는 문자열 키로 인용('--accent': 'blue')되어 JSX에 보존. -webkit-… 같은 벤더 프리픽스 프로퍼티도 인용됨.
JavaScript 실행하거나 스크립트 eval?
안 함. 파서는 작은 손으로 작성한 스캐너 — <script> 태그도 다른 요소처럼 텍스트로 통과. 변환은 순수 문자열 수준.
변환한 마크업이 원래 HTML과 다르게 렌더링되는 이유는?
두 가지 규칙이 가장 자주 문제를 만든다. 요소 사이의 공백은 HTML에서는 의미가 있지만 JSX는 그것을 없애는 자리가 있어서, 인라인 요소들이 서로 붙어버릴 수 있다. 그리고 브라우저는 잘못된 중첩을 조용히 고쳐준다. 떠 있는 표의 행이나 문단 안의 div 같은 것들이다. JSX는 적은 그대로를 보존하므로, 브라우저가 말없이 고쳐주던 구조가 이제는 깨진 채로 남는다.
내가 쓰지 않은 HTML을 붙여넣어도 안전한가?
여기서 변환하는 것은 안전하다. 실행되는 게 없고 텍스트를 변형할 뿐이기 때문이다. 주의가 필요한 쪽은 그 결과를 렌더링하는 일이다. 속성과 인라인 핸들러는 앱에 마운트되는 순간 진짜 코드가 된다. 배포 전에 나온 결과를 읽어보고, 변환을 피하려고 신뢰할 수 없는 마크업을 원시 HTML 주입으로 우회시키지 마라.
관련 도구
CSS to JS 스타일 객체 변환기
CSS 선언 블록을 React/JS 인라인 스타일 객체로 브라우저에서 변환합니다.
개발
JSON to Kotlin 데이터 클래스 변환기
JSON 객체를 타입이 지정된 프로퍼티가 포함된 Kotlin 데이터 클래스로 브라우저에서 변환합니다.
개발
JSON to C# 클래스 변환기
JSON 객체를 자동 프로퍼티 타입 매핑이 적용된 C# 클래스로 브라우저에서 변환합니다.
개발
JSON to Java 클래스(POJO) 변환기
JSON 객체를 타입이 매핑된 필드가 포함된 Java POJO 클래스로 브라우저에서 변환합니다.
개발
Python .pyc 바이트코드 분석기
__pycache__의 .pyc를 브라우저에서 엽니다. 어떤 CPython이 만들었는지, 무효화 방식, 코드 객체 트리와 디스어셈블리를 보여 줍니다.
개발
Git 객체 ID 계산기 (hash-object)
blob·tree·commit·tag의 git 객체 ID를 SHA-1과 SHA-256으로 계산하고, git이 해시하는 헤더와 루스 객체 경로까지 보여줍니다.
개발