입력

포맷된 출력

JSX 포매터란?

JSX는 React 컴포넌트를 위한 XML 유사 구문을 가진 JavaScript입니다. JSX 포매터는 JSX/React 코드에 들여쓰기와 줄 바꿈을 추가합니다. React JSX 문서가 구문을 정의합니다. 표준 JavaScript 포매터는 JSX를 올바르게 처리하지 못할 수 있습니다.

이 도구는 완전히 브라우저에서 실행됩니다. 서버로 전송되는 데이터가 없습니다. JSX를 붙여넣거나 .jsx 또는 .js 파일을 업로드하면 포맷된 출력을 얻습니다. 순수 JavaScript에는 JavaScript 포매터를, 검증에는 JavaScript 검증기를, TypeScript 변환에는 JavaScript를 TypeScript로를 사용하세요.

이 도구 사용 방법

붙여넣기 또는 업로드

왼쪽 패널에 JSX 또는 React 코드를 붙여넣거나 .jsx 또는 .js 파일을 업로드하세요. 샘플을 사용해 예제 코드를 불러올 수 있습니다. 지우기로 초기화할 수 있습니다.

출력 확인

오른쪽 패널에 올바른 들여쓰기의 포맷된 JSX가 표시됩니다. 유효하지 않은 JSX는 오류를 표시합니다.

복사 또는 다운로드

결과를 얻으려면 복사 또는 다운로드를 사용하세요. 코드 실행에는 JavaScript 콘솔을, 압축에는 JavaScript 압축기를 사용하세요.

JSX 포매터 예시

압축된 JSX/React 코드를 포맷하는 예시입니다.

예시: 구독자 카드 컴포넌트

압축된 JSX 입력:

입력

포맷된 출력:

출력

JSX 포매터가 도움이 되는 경우

React, Next.js, 또는 다른 JSX 기반 프레임워크로 작업할 때 이 포매터가 JavaScript와 XML의 혼합을 처리합니다. 컴포넌트, 훅, JSX 템플릿에 탁월합니다. webpack과 Vite 같은 빌드 도구들은 종종 Babel을 사용해 JSX를 변환합니다. 순수 JS에는 JavaScript 포매터를 사용하세요.

자주 묻는 질문

내 데이터는 안전한가요?

예. 포맷은 완전히 브라우저에서 실행됩니다. 어떤 서버로도 데이터가 전송되지 않습니다.

JSX 포매터 대 JS 포매터?

JSX 포매터는 JSX 구문(태그, props)을 이해합니다. JS 포매터는 순수 JavaScript용입니다. React 코드에는 JSX 포매터를 사용하세요.

TypeScript/TSX를 지원하나요?

일부 경우에 TSX를 처리할 수 있습니다. TypeScript 중심 포맷의 경우 출력을 확인하세요.

Vue 템플릿은 어떻게 되나요?

Vue는 다른 템플릿 구문을 사용합니다. 이 도구는 JSX/React용입니다.

JSX를 압축할 수 있나요?

압축에는 webpack 또는 rollup을 사용하세요. Prettier도 JSX를 위한 인기 포매터입니다.

JSX 포매터

입력