HTML을 JSX로

SVG 아이콘 코드도 그대로 넣으면 stroke-width → strokeWidth처럼 리액트 이름으로 바꿔 줘요.

입력한 내용은 서버로 보내지 않고 이 기기에서만 처리돼요

감싸기

컴포넌트 이름

들여쓰기

주석 남기기 TypeScript (.tsx)

HTML 입력

<!-- 로그인 카드 -->
<div class="card login" style="max-width: 360px; margin: 0 auto; background-color:#fff">
  <h2 class="title">로그인</h2>
  <label for="email">이메일</label>
  <input type="email" id="email" class="input" placeholder="you@example.com" autofocus required>
  <label for="pw">비밀번호</label>
  <input type="password" id="pw" maxlength="64" tabindex="2">
  <button type="submit" class="btn primary" onclick="login()" disabled>들어가기</button>
  <p class="hint">계정이 없나요? {회원가입}은 <a href="/join" target="_blank">여기</a><br>에서</p>
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14"/></svg>
</div>

JSX 결과

HTML과 JSX는 무엇이 다른가요

리액트의 JSX는 HTML처럼 보이지만 실제로는 자바스크립트라서 몇 가지 규칙이 달라요. 디자인 시안·부트스트랩 예제·SVG 아이콘을 그대로 붙여넣으면 오류가 나거나 경고가 쏟아지는 이유예요. 이 도구는 브라우저의 HTML 해석기로 코드를 읽은 뒤, 요소와 속성을 하나씩 JSX 규칙에 맞게 다시 써요.

바꾸는 것

속성 이름: class → className, for → htmlFor, tabindex → tabIndex, maxlength → maxLength, SVG의 stroke-width → strokeWidth, viewbox → viewBox. data-·aria- 속성은 그대로 둬요.
style: style="margin-top: 4px" → style={{ marginTop: "4px" }}처럼 객체로, CSS 변수(--main)는 따옴표 이름으로 바꿔요.
빈 태그: <br>, <img>, <input>은 />로 닫고, 내용이 없는 태그도 스스로 닫아요.
이벤트: onclick="login()" → onClick={() => { login() }}. 입력란의 value·checked는 제어되지 않는 기본값인 defaultValue·defaultChecked로 바꿔 경고가 나지 않게 해요.
글과 주석: 글 속의 { }는 {"{"}로 감싸고, HTML 주석은 {/* */}로 바꿔요. 맨 위 요소가 여러 개면 <>…</>로 감싸요.

참고할 점

<script>는 JSX 안에서 실행되지 않아 주석으로 남겨요. 결과 코드는 Babel(JSX) 해석기로 문법 오류가 없는지 확인했어요. HTML은 이 브라우저에서만 처리하고, 이미지나 링크를 불러오지 않는 안전한 방식(template 요소)으로 읽어요. 보기 좋은 줄바꿈까지 맞추려면 결과를 ‘코드 정렬기’(Prettier)에 넣으세요.

참고한 자료

자주 묻는 질문

Vue나 Svelte용으로도 바꿀 수 있나요?

Vue·Svelte 템플릿은 일반 HTML을 그대로 쓰기 때문에 변환이 필요 없어요. class, for 등을 그대로 두면 돼요.

줄바꿈이 원본과 달라요.

JSX에서는 여러 공백·줄바꿈이 한 칸으로 합쳐지거나 사라지기 때문에 글 속 공백을 정리했어요. 화면에 보이는 결과는 같아요.

style 숫자에 따옴표가 붙어요.

단위가 없는 숫자 중 line-height·opacity·z-index처럼 숫자 그대로 쓰는 속성은 숫자로, 나머지는 원본 글자를 그대로 문자열로 넣어요.

HTML과 JSX는 무엇이 다른가요

바꾸는 것

참고할 점

참고한 자료

자주 묻는 질문

함께 쓰면 좋은 도구