# JSX 포매터

이 JSX 포매터로 React 컴포넌트와 기타 JSX의 형식을 지정하세요. 코드를 붙여넣으면 도구가 JSX가 활성화된 JavaScript 모듈로 파싱한 다음, JavaScript를 두 칸 들여쓰기와 세미콜론을 사용해 출력하고 여러 줄로 된 JSX 요소를 정리합니다. 이때 중첩 태그는 괄호 안에서 각각 별도의 줄에 배치됩니다. 구문 오류도 표시하므로 React 개발자는 검토, 디버깅, 문서화에 활용할 수 있는 읽기 쉬운 컴포넌트를 빠르게 얻을 수 있습니다.

## 자주 묻는 질문

### JSX 포매터는 어떻게 작동하나요?

먼저 코드를 JSX가 활성화된 JavaScript 모듈로 파싱한 뒤 일관된 스타일로 출력합니다. JSX 요소에는 HTML 포매터와 동일한 규칙을 적용하므로 중첩된 블록 태그가 각각 들여쓰기된 별도 줄에 배치됩니다.

### 여러 줄의 JSX 요소는 어떻게 작성되나요?

요소에 div, section, p, ul 또는 h1 같은 블록 수준 자식 요소가 있으면 각 자식 요소가 별도의 줄에 배치되고, 요소 전체가 괄호로 묶입니다. 단일 컴포넌트 태그처럼 한 줄에 들어가는 요소는 인라인으로 유지됩니다.

### 프래그먼트와 자체 닫는 컴포넌트도 지원하나요?

네. <>와 </>로 작성한 프래그먼트 및 <Item key={1}/> 같은 자체 닫는 컴포넌트를 파싱하고 그대로 유지합니다. 속성과 중괄호 안의 표현식도 작성된 그대로 복사됩니다.

### 구문 오류가 있으면 어떻게 되나요?

파서가 중단되고 도구가 예기치 않은 토큰과 같은 오류 메시지를 표시합니다. 형식이 일부만 지정된 코드는 반환하지 않습니다. 표시된 부분을 수정한 다음 다시 형식을 지정하세요.

### JavaScript 부분에는 어떤 스타일이 적용되나요?

블록은 두 칸 들여쓰고, 문장마다 한 줄을 사용하며, 연산자 주위에 공백을 넣고 문장 끝에 세미콜론을 추가합니다. 스타일을 변경하는 옵션은 없습니다.

### 주석이 보존되나요?

네. JavaScript의 줄 주석과 블록 주석은 유지됩니다. JSX 표현식 안의 주석도 중괄호 안에 그대로 남습니다.

### TSX 파일에서 TypeScript을 지원하나요?

아니요. 이 도구가 파싱하는 JSX 문법에는 타입 주석이 포함되지 않으므로 타입이 있는 TSX은 구문 오류로 거부됩니다. 타입이 지정된 코드에는 TypeScript 포매터를 사용하세요.

### 형식 지정으로 컴포넌트 렌더링이 달라지나요?

JavaScript는 다시 출력될 뿐이며, JSX 레이아웃은 블록 요소 사이의 공백을 변경합니다. React는 블록 요소가 별도 줄에 있을 때 그 사이의 공백을 무시합니다. 정확한 간격이 중요하다면 태그 옆의 인라인 텍스트를 확인하세요.

### 출력이 javascript 펜스로 감싸져 있는 이유는 무엇인가요?

JSX는 JavaScript의 확장이므로 결과는 javascript가 표시된 Markdown 코드 블록으로 반환됩니다. .jsx 파일에 사용할 코드는 펜스 사이의 줄을 복사하세요.

### 컴포넌트 크기는 얼마나 커도 되나요?

한 번 실행할 때 최대 5 MB의 코드를 처리할 수 있으며, 더 큰 입력은 메시지와 함께 거부됩니다. 출력은 Code Formatter의 JSX 옵션과 동일합니다.

여기에 광고를 게재하시겠어요?

[이메일 보내기](mailto:hi@dennn.is?subject=OneClick%20Pro%20%EA%B4%91%EA%B3%A0%20%EB%AC%B8%EC%9D%98)

[광고 WordPress을 위한 에이전트 지원 플러그인 모음입니다.](https://sleekwp.com/?ref=oneclickpro)