HTML → JSX

HTML을 React JSX로 바꿉니다. class→className, style 객체 변환, 셀프 클로징 태그, 주석 처리, 컴포넌트로 감싸기를 지원합니다.

이 도구는

HTML을 React JSX로 바꿉니다. class→className, for→htmlFor처럼 속성 이름을 바꾸고, 인라인 스타일을 객체로, 빈 태그를 셀프 클로징으로, 주석을 JSX 주석으로 바꿉니다.

사용 방법

HTML을 붙여넣습니다.
필요하면 컴포넌트로 감싸기를 켭니다.
JSX를 React 코드에 복사합니다.

자주 묻는 질문

최상위 요소가 여러 개면요?

<>…</> 프래그먼트로 감싸서 올바른 JSX로 만듭니다.

이벤트 핸들러도 바뀌나요?

onclick은 onClick으로 바뀌지만 값은 문자열로 남습니다. 컴포넌트에서 함수로 바꿔 주세요.

본문의 중괄호는 어떻게 되나요?

{'{'}와 {'}'}로 감싸서 JSX가 표현식으로 읽지 않게 합니다.

관련 도구

HTML 엔티티 인코딩 / 디코딩 – HTML 엔티티 이스케이프와 해제
HTML 미리보기 – 격리된 프레임에서 HTML 렌더링
SVG → CSS – SVG를 CSS 배경용 data URI로 변환

포맷

JSON 포맷 / 검증 – JSON 정렬, 압축, 문법 검사
줄 정렬 / 중복 제거 – 줄 정렬, 중복 제거, 뒤집기, 공백 정리

인코딩 / 디코딩

Base64 인코딩 / 디코딩 – 텍스트를 Base64로 변환 (UTF-8)
URL 인코딩 / 디코딩 – URL 퍼센트 인코딩과 디코딩
HTML 엔티티 인코딩 / 디코딩 – HTML 엔티티 이스케이프와 해제
Base64 이미지 인코딩 / 디코딩 – 이미지를 data URI로 바꾸고 Base64 이미지 미리보기
백슬래시 이스케이프 / 해제 – 따옴표, 줄바꿈, 제어 문자 이스케이프
Hex ↔ ASCII – 텍스트와 16진수 바이트 상호 변환
JWT 디버거 – JSON Web Token 헤더와 페이로드 해석

생성

UUID / ULID 생성 / 분석 – UUID v4 / v7, ULID 생성과 기존 ID 분석
해시 생성기 – MD5, SHA-1, SHA-256, SHA-384, SHA-512 해시
랜덤 문자열 생성기 – 암호학적으로 안전한 랜덤 문자열
Lorem Ipsum 생성기 – 문단·문장·단어 단위 더미 텍스트
QR 코드 생성 / 읽기 – QR 코드를 만들고 이미지에서 읽기

변환

세계 시간 변환 – 시간대 간 시각 변환 (기본값: 이 컴퓨터의 현재 시각)
유닉스 시간 변환 – 유닉스 타임스탬프와 날짜 문자열 변환
진법 변환기 – 2진수, 8진수, 10진수, 16진수 상호 변환
YAML ↔ JSON – YAML과 JSON 상호 변환
CSV ↔ JSON – CSV와 JSON 상호 변환
HTML → JSX – HTML 마크업을 React JSX로 변환
쿼리 문자열 ↔ JSON – URL 쿼리 문자열과 JSON 상호 변환
URL 파서 – URL을 구성 요소와 쿼리 파라미터로 분해
색상 변환기 – HEX, RGB, HSL, HWB, CMYK 상호 변환
SVG → CSS – SVG를 CSS 배경용 data URI로 변환
JSON ↔ PHP 배열 – JSON과 PHP 배열 문법 상호 변환
PHP Serialize / Unserialize – JSON과 PHP serialize() 형식 상호 변환

텍스트

정규식 테스터 – 정규식을 테스트하고 매치 결과 확인
문자열 케이스 변환 – camelCase, snake_case, kebab-case 등
문자열 분석 – 글자·바이트·단어 수와 코드 포인트 확인
텍스트 비교 – 두 텍스트를 줄·단어·글자 단위로 비교

검사

Cron 식 해석 – cron 식 설명과 다음 실행 시각
cURL 분석 – cURL 명령을 분해하고 fetch() 코드로 변환
X.509 인증서 디코더 – PEM 인증서와 체인 분석

미리보기

Markdown 미리보기 – GitHub 스타일 Markdown 렌더링
HTML 미리보기 – 격리된 프레임에서 HTML 렌더링