JSX 변환: React JSX를 일반 JavaScript로 바꾸기
JSX 변환은 React 컴포넌트의 태그 문법을 브라우저가 실행할 수 있는 일반 JavaScript로 바꾸는 일이에요. 이 도구는 Babel을 쓰기 때문에 결과가 Babel 빌드 단계와 같아요. 클래식 React.createElement 호출과 자동 jsx() 런타임 중에서 고르고 결과를 복사하면 돼요. 코드는 브라우저 안에서 컴파일되고, 업로드되지도 실행되지도 않아요.
JSX 변환하는 방법
이 JSX to JS converter는 설치도 가입도 필요 없어요.
- JSX 코드 칸에 코드를 붙여넣으세요. 비어 있는 동안에는 '여기에 JSX를 붙여넣으세요…'라고 보여요. 최대 1,000,000자까지 넣을 수 있어요.
- 잠깐 기다리세요. 입력하거나 붙여넣고 마지막으로 바꾼 뒤 약 3분의 1초 후에 자동으로 컴파일하기 때문에 누를 버튼이 없어요. 처음에는 Babel을 한 번 내려받느라 조금 더 걸려요.
- JavaScript 제목 아래에서 결과를 확인하세요. 읽기 전용으로 색이 입혀진 코드로 보여요.
- 클립보드에 복사를 선택하세요. 버튼이 복사했어요로 바뀌어요.
- JSX가 컴파일되는 방식을 바꾸려면 옆에 있는 톱니바퀴 버튼(JSX 런타임 설정)을 사용하세요. JSX 런타임 그룹이 열리고 클래식과 자동 두 가지 중에서 고를 수 있어요. 바꾸면 코드가 다시 컴파일돼요.
올바른 JSX가 아니면 줄과 열이 적힌 구문 오류 메시지가 나오고, 문제가 된 줄과 그 위치를 가리키는 ^ 표시가 함께 보여요. 오류를 고칠 때까지 결과는 나오지 않아요. 코드에 JSX가 하나도 없으면 일반 JavaScript 그대로 보여 주고 '이 코드에서 JSX를 찾지 못해서 일반 JavaScript 그대로 돌려줬어요.'라고 알려 줘요.
클래식과 자동 런타임, 무엇을 고를까요
클래식은 기본값이에요. 모든 요소가 React.createElement(type, props, ...children) 호출이 되고, 프래그먼트는 React.Fragment가 돼요. import는 추가되지 않아서 React가 스코프 안에 있어야 해요. 프로젝트나 튜토리얼에서 파일마다 React를 import하거나, 오래된 환경을 대상으로 할 때 알맞아요.
자동에서는 JSX가 jsx() 또는 jsxs() 호출이 되고, 자식 요소는 props 안으로 들어가며, 프래그먼트는 _Fragment가 돼요. react/jsx-runtime에서 가져오는 import도 코드가 쓰는 이름만 골라 추가돼요. React 17 이상이 필요하고, 요즘 React 툴체인이 만들어 내는 결과와 같아요.
결과에서 그대로인 것과 바뀌는 것
- import와 export는 쓴 그대로 남아요.
- 주석은 원래 자리에 남아요.
- JSX 주변의 일반 JavaScript는 Babel의 줄 정리를 빼면 그대로예요.
- 서식은 Prettier가 아니라 Babel 방식이에요. JSX 안의 따옴표와 줄바꿈은 유지되지 않아요. 결과를 깔끔하게 정리하려면 코드 포맷터에 넣어 보세요.
- 요소 호출 앞에는
/*#__PURE__*/주석이 붙어요. 번들러에게 그 호출에 부작용이 없다고 알려 주는 표시예요.
하지 못하는 일: TSX, TypeScript, Flow
컴파일할 수 있는 것은 JSX뿐이에요. TypeScript는 읽지 못해서 타입 표기가 있는 TSX는 구문 오류가 되고, Flow도 지원하지 않아요. 코드를 실행하거나, 컴포넌트가 잘 동작하는지 확인하거나, 파일을 하나로 묶는 일도 하지 않아요.
반대로 일반 JavaScript를 타입이 있는 코드로 바꾸고 싶다면 'JS를 TS로 변환' 도구를 사용하세요. 압축되거나 난독화된 스크립트를 읽으려면 'JS 난독화 해제' 도구를 쓰면 돼요.
브라우저 안에서 실행되는 이유
Babel은 처음 붙여넣을 때 한 번만 불러오고, 그다음부터는 내 기기의 Web Worker에서 컴파일해요. 컴포넌트는 어디로도 전송되지 않고 실행되지도 않아서 부작용이 있는 파일을 붙여넣어도 안전해요.
자주 묻는 질문
JSX 변환을 온라인으로 하려면 어떻게 하나요?
JSX를 'JSX 코드' 칸에 붙여넣으세요. 약 3분의 1초 뒤에 컴파일된 JavaScript가 'JavaScript' 제목 아래에 나타나요. 변환 버튼은 없고, '클립보드에 복사'로 결과를 가져가면 돼요. Babel은 처음 붙여넣을 때 한 번 내려받기 때문에 첫 변환만 조금 더 걸려요.
Babel이 JSX를 JavaScript로 바꿔 주나요?
네. Babel의 React 프리셋이 JSX를 JavaScript로 컴파일해요. 이 페이지가 브라우저에서 실행하는 것도 바로 이것이라서 결과가 Babel 빌드 단계와 같아요. 빌드 도구도 프로젝트를 빌드할 때 같은 일을 자동으로 해요. 컴포넌트 하나나 코드 조각의 결과를 보거나 복사하고 싶을 때 이 페이지를 쓰세요.
JSX와 JS의 차이는 무엇인가요?
JSX는 화면을 설명하기 위해 XML과 비슷한 문법을 더한 JavaScript예요. 예를 들면 onClick 핸들러가 붙은 button 태그 같은 것이에요. 브라우저가 직접 실행할 수 없어서 컴파일러가 각 태그를 일반 함수 호출로 바꿔 써요. 그 결과는 평범한 JavaScript예요. .jsx 확장자는 JSX가 들어 있는 파일이라는 뜻의 이름 규칙일 뿐이에요.
클래식 런타임과 자동 런타임은 무엇이 다른가요?
클래식은 JSX를 React.createElement 호출로 바꾸기 때문에 JSX를 쓰는 모든 파일에서 React가 스코프 안에 있어야 해요. 자동은 JSX를 jsx()와 jsxs() 호출로 바꾸고 react/jsx-runtime에서 가져오는 import도 대신 추가해 줘서, JSX를 쓰려고 React를 import할 필요가 없어요. 자동에는 React 17 이상이 필요해요. 이 도구의 기본값은 '클래식'이에요.
JSX를 React.createElement로 바꾸려면 어떻게 하나요?
JSX 런타임을 기본값인 '클래식'으로 두세요. 모든 요소가 React.createElement 호출이 되고, 태그 이름, props 객체(없으면 null), 자식 요소 순서로 들어가요. 프래그먼트는 React.Fragment가 돼요.
결과가 React를 쓰는데 import하지 않는 이유는 뭔가요?
클래식 결과는 React.createElement와 React.Fragment를 호출하지만, React가 이미 스코프 안에 있다고 보고 import를 추가하지 않아요. 파일이 import React from 'react'로 시작하지 않는다면 그 줄을 추가하거나, 필요한 import를 써 주는 '자동'으로 JSX 런타임을 바꾸세요.
결과에 /*#__PURE__*/ 주석이 붙는 이유는 뭔가요?
Babel은 모든 요소 호출 앞에 /*#__PURE__*/를 붙여요. 그 호출에 부작용이 없다고 minifier와 번들러에게 알려 주는 표시라서, 한 번도 쓰이지 않은 요소는 최종 번들에서 빠질 수 있어요. 주석은 그대로 두어도 되고 지워도 돼요. 코드의 동작은 달라지지 않아요.
TSX나 TypeScript도 변환되나요?
아니요. 이 도구는 일반 JavaScript 안의 JSX를 기대하기 때문에 props: Props 같은 타입 표기는 구문 오류가 돼요. 먼저 타입을 지우거나 TypeScript 컴파일러로 컴파일하세요. Flow 문법도 지원하지 않아요.
내 코드가 업로드되거나 실행되나요?
아니요. Babel이 브라우저 안의 Web Worker에서 코드를 컴파일하고, 서버로는 아무것도 전송되지 않아요. 코드가 실행되지도 않아서 부작용이 있는 컴포넌트를 붙여넣어도 안전해요. 내려받는 것은 Babel 자체뿐이고, 그것도 한 번만이에요.
