JSX 심층 분석

JSX는 HTML 내부에 JavaScript 코드를 작성할 수 있음을 의미합니다. 이를 JSX라고 합니다. 또한 JSX는 코드를 쉽게 이해할 수 있도록 도와주며 중요한 점은 코드를 디버그하기가 더 쉽다는 것입니다.
코드를 처리하고 이해하기 위해 JSX가 복잡하지 않습니다. JSX 핸들 없이 반응하여 큰 Application을 만들고 싶다면 모든 구성 요소의 코드가 더 어렵기 때문에 JSX를 사용하면 큰 Application을 쉽게 처리할 수 있습니다.

JSX는 HTML 코드 및 JavaScript 코드와 함께합니다. React 구성 요소에는 브라우저가 JSX 코드를 이해하지 못하기 때문에 JSX 코드를 일반 Javascript 코드 런타임으로 변환하는 데 사용되는 렌더링 기능이 있습니다.

브라우저 내에서 JSX 코드를 직접 실행할 수 없습니다. JSX 코드를 JavaScript로 실행하기 위한 컴파일러가 필요했습니다. babel 컴파일러는 여기서 JSX 코드를 JavaScript로 변환합니다. 여기서 Babel은 JSX 코드를 JavaScript로 전송하는 것처럼 작동합니다. 또한 CDN(온라인)을 통해 Babel 컴파일러를 사용할 수 있습니다. JSX 예제에 따라 확인하십시오.
Sample Example JSX:

const ele = <h1>This is sample JSX</h1>;

이는 React의 간단한 JSX 코드입니다. 그러나 JSX는 JavaScript 코드에 유효하지 않기 때문에 브라우저는 JSX 코드를 이해하지 못합니다. 브라우저 내에서 JSX 코드를 실행하려면 JSX 코드를 컴파일해야 하는 경우 브라우저 내에서 직접 JSX 코드를 실행할 수 없습니다

.

Babel 컴파일러를 사용하면 브라우저가 JavaScript 코드를 이해하므로 JSX 코드를 JavaScript 코드로 변환할 수 있습니다

.

위의 코드는 다소 HTML과 JS 코드처럼 보이지만 javascript도 변수처럼 사용하지만 HTML도 JavaScript도 아닌 JSX입니다

JSX의 이점:

JSX는 큰 React Application을 위한 큰 코드 조각을 작성할 때 코드를 더 간단하고 매력적으로 만드는 데 도움이 됩니다.

React DOCS에 따르면 대부분의 사람들은 내부에서 UI로 작업할 때 시각적 도움으로 JSX가 유용하다고 생각합니다.
자바스크립트 코드 .

또한 JSX는 React가 보다 유용한 오류 및 경고 메시지를 표시하도록 허용합니다.

일반 JavaScript 코드에 비해 JSX가 더 빠릅니다.

JSX를 사용하면 React에서 더 빠른 애플리케이션을 만들 수 있습니다.

render 메서드 내에서 두 개 이상의 HTML 요소를 사용하면 React에서 JSX를 통해 오류 메시지가 표시됩니다. 즉, render 메서드 내에서 둘 이상의 HTLM 요소를 사용할 수 없습니다. 이 오류 메시지를 수정하면 단일 div를 사용할 수 있고 이 단일 div 안에 모든 HTML 요소를 넣을 수 있습니다.

JSX가 없으면 코드를 이해하기 복잡함

React 애플리케이션을 구축할 때 JSX를 사용하기 쉬움

JSX를 사용하면 UI 템플릿을 쉽게 만들 수 있음

JSX를 사용하면 JS 코드 및 HTML 코드를 쉽게 처리할 수 있습니다

.
Example of with JSX and without JSX
1단계: npx create-react-app my-app cmd를 사용하여 React 애플리케이션을 생성합니다.
2단계: 프로젝트 folder.my-app를 생성한 후 cd 예제 cmd를 사용합니다.
3단계: filesWithoutjsx.jsandWithJsx.js를 만듭니다.

//apps.js
import './App.css' ;
import Withoutjsx from './Components/Withoutjsx';
import Withjsx from './Components/Withjsx';

function App() { 
  return ( 
    <div className="App"> 
      <Withoutjsx /> 
      <Withjsx /> 
    </div> 
  ) 
}  
export default App 

JSX.js 없이

import React from 'react'

const Withoutjsx = () => {
  return React.createElement(
    'div',
    { id: 'Withoutjsx', className: 'welComeClass' },
    React.createElement('h1', null, 'Welcome to Bihar),
  )
}
export default Withoutjsx;

JSX.js로

import React from 'react'

const Withjsx = () => {
  return (    <div className="welComeClass">
      <h1>Welcome to Bihar</h1>
    </div>
  )
}

export default Withjsx;

결론: 위의 구성 요소 코드 예제 withoutjsx 및 withjsx는 두 구성 요소 모두 동일한 결과를 보여주지만 withjsx 구성 요소 작성 코드를 사용하는 것이 withoutjsx 구성 요소에 비해 훨씬 쉽습니다.

문서: jsx-in-depth