HTML → JSX 변환
HTML을 React 컴포넌트로 포팅할 때 지루한 작업을 처리하는 자체 컨버터: 속성 이름 변경(`class`·`for`·`tabindex` 등), inline 이벤트 핸들러 대문자화(`onclick → onClick`), void 태그 self-closing(`<br>` → `<br />`), HTML 주석 → JSX 주석, 선택적으로 `style="color: red; font-size: 14px"`를 `style={{ color: 'red', fontSize: '14px' }}` 객체 리터럴로 변환.
—
JSX
<>
<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를 컴포넌트 파일에 복사.
자주 묻는 질문
- 어떤 속성이 이름 변경됨?
- 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>` 태그도 다른 요소처럼 텍스트로 통과. 변환은 순수 문자열 수준.
관련 도구
CSS to JS 스타일 객체 변환기
CSS 선언 블록을 React/JS 인라인 스타일 객체로 브라우저에서 변환합니다.
개발 0 0
JSON to Kotlin 데이터 클래스 변환기
JSON 객체를 타입이 지정된 프로퍼티가 포함된 Kotlin 데이터 클래스로 브라우저에서 변환합니다.
개발 0 0
JSON to C# 클래스 변환기
JSON 객체를 자동 프로퍼티 타입 매핑이 적용된 C# 클래스로 브라우저에서 변환합니다.
개발 0 0
JSON to Java 클래스(POJO) 변환기
JSON 객체를 타입이 매핑된 필드가 포함된 Java POJO 클래스로 브라우저에서 변환합니다.
개발 0 0
EditorConfig 생성기
들여쓰기 스타일, 줄 끝, 문자셋, 일반적인 재정의를 갖춘 .editorconfig 파일을 브라우저에서 만듭니다.
개발 0 0
HTML 엔티티 인코더 / 디코더
HTML 특수문자(& < > " ')를 이스케이프하거나 엔티티를 원문으로 디코드합니다.
개발 0 0