Softonic

HTML을 JSX로 변환하는 도구

단계 1 / 2

변환 내용: class → className, for → htmlFor, 인라인 스타일 → JSX 객체, void 태그 자동 닫기, HTML 주석 제거.

JSX로 변환

JSX는 HTML처럼 보이지만 실제로는 다릅니다. class는 className, for는 htmlFor, style은 문자열이 아닌 객체이며 모든 빈 태그는 자체 종료되어야 합니다. HTML을 붙여넣으면 이 변환기가 첫 시도에 컴파일되는 JSX를 만들어 주므로, 마케팅 페이지를 React 컴포넌트로 옮길 때 컴파일러 오류를 쫓느라 시간을 낭비하지 않아도 됩니다.

HTML을 JSX로 변환하는 방법

  1. 1

    HTML을 붙여넣기

    컴포넌트 하나 분량의 마크업이든, 페이지 전체 조각이든 상관없습니다.

  2. 2

    변환하기

    도구가 `class`, `for`, `readonly` 같은 속성을 JSX 표기로 바꾸고 인라인 스타일을 객체로 변환합니다.

  3. 3

    JSX를 검토하세요

    출력물은 `.jsx` 또는 `.tsx` 파일에 바로 붙여넣을 수 있는 상태입니다.

  4. 4

    복사하여 붙여넣기

    코드가 한 줄짜리 표현식으로 되어 있어 기존 컴포넌트 안에 자연스럽게 들어갑니다.

꼭 알아야 할 HTML과 JSX의 차이

JSX는 HTML이 아닙니다. React.createElement() 호출로 컴파일되는 JavaScript 표현식이므로 속성 이름이 JavaScript 규칙을 따릅니다.

컨버터는 가장 흔한 이름 변경을 자동으로 처리합니다. 아래의 전체 목록은 JSX를 직접 작성할 때 필요한 참고 자료입니다.

속성 이름 변경

HTML JSX 참고
class className class는 JS 예약어
for htmlFor for는 예약어
tabindex tabIndex 카멜 케이스
readonly readOnly 카멜 케이스
contenteditable contentEditable 카멜 케이스
stroke-width (SVG) strokeWidth 카멜 케이스
xlink:href xlinkHref 콜론 네임스페이스는 평탄화
aria-label aria-label ARIA는 하이픈 유지
data-* data-* data 속성은 하이픈 유지

style 속성

HTML: style="color: red; padding: 10px"

JSX: style={{ color: 'red', padding: 10 }}

단위가 없는 숫자 값은 픽셀이 됩니다. 백분율이나 flex처럼 단위가 없는 값은 문자열로 유지하세요.

자체 종료하는 빈 요소

HTML은 <br>과 <input>을 닫는 태그 없이 허용합니다. JSX는 <br />과 <input />처럼 모든 요소를 명시적으로 닫아야 합니다.

주석

HTML 주석(<!-- -->)은 JSX 본문에서 사용할 수 없습니다. 이 컨버터는 주석을 제거합니다. 메모를 남기고 싶다면 {/* JavaScript 블록 주석 */} 형태로 직접 작성하세요.

불리언 속성

HTML: <input checked> (또는 <input checked="checked">)

JSX: <input checked={true} /> 또는 단순히 <input checked />. “true”라는 문자열을 전달하지 마세요.

탈출구

  • 신뢰할 수 없는 HTML 조각은 dangerouslySetInnerHTML={{ __html: ... }}로 렌더링할 수 있습니다. 사용을 막으려고 의도적으로 보기 흉하게 만들어진 API입니다.
  • 커스텀 data-* 속성은 그대로 유지됩니다. 표준이 아닌 속성도 전달되지만 개발 모드에서 React 경고가 나타날 수 있습니다.

자주 묻는 질문

stroke-width 같은 SVG 속성은 JSX에서 camelCase(strokeWidth)로 써야 하며 모든 태그는 self-closing이어야 합니다. 컨버터는 SVG 안의 void 태그를 self-closing으로 바꾸고 스타일 문자열의 속성 이름을 camelCase로 변환하지만, SVG 속성 이름은 바꾸지 않으므로 stroke-width는 strokeWidth로 직접 수정하세요. 단발성 아이콘은 SVG 파일로 저장한 뒤 svgr로 컴포넌트로 가져오는 것이 가장 깔끔한 방법입니다.

네. JSX와 TSX 모두 className을 사용합니다. 유일한 예외는 dangerouslySetInnerHTML 안입니다. 원본 HTML 문자열이 그대로 DOM에 삽입되므로 class가 유지됩니다.

아니요. 출력은 JSX 조각뿐이며 export default function 래퍼나 타입 어노테이션도 없습니다. .jsx 또는 .tsx 파일에 붙여 넣고 props, 타입, 래퍼는 직접 추가하세요. class는 여전히 className으로 변환되므로 TSX가 기대하는 형태 그대로입니다.

변경 없이 그대로 전달됩니다. 컨버터는 이벤트 핸들러 이름을 바꾸지 않으므로 onclick을 onClick으로 고치고 문자열 값을 실제 함수로 교체하세요. 예: onClick={() => doThing()}. doThing 함수는 컴포넌트 스코프에 정의해야 합니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

이메일 검증기

이메일 주소를 검증합니다. RFC 5322 구문 검사, 실시간 MX 레코드 조회, 그리고 로컬 파트, 도메인, 길이 정보를 제공합니다. 이메일은 전송되지 않습니다.

EditorConfig 생성기

들여쓰기 스타일과 크기, 줄 끝, 문자 인코딩, 공백 규칙을 지정해 .editorconfig 파일을 생성하고 IDE와 편집기 전반의 형식을 일관되게 유지하세요.

이 도구는 다른 언어로도 제공됩니다