어떤 속성이 이름 변경됨?

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?

안 함. 파서는 작은 손으로 작성한 스캐너 — ` ` 태그도 다른 요소처럼 텍스트로 통과. 변환은 순수 문자열 수준.

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' }}` 객체 리터럴로 변환.

—

<> fragment로 감싸기style 문자열을 객체로 변환void 태그 self-close (<br />·<img /> 등)

HTML

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>` 태그도 다른 요소처럼 텍스트로 통과. 변환은 순수 문자열 수준.

HTML → JSX 변환

사용법

자주 묻는 질문

관련 도구

JWT 디코더

UUID 생성기

해시 생성기 (SHA)

URL 인코더 / 디코더

Base64 인코더 / 디코더

JSON 포맷터 & 검증기