JSX의 원리를 이해하려면 먼저 JavaScript 개체를 사용하여 DOM 요소의 구조를 표현하는 방법을 이해해야 합니다.
아래 DOM 구조를 보세요:
欢迎进入React的世界
React.js 是一个帮助你构建页面 UI 的库
로그인 후 복사
JavaScript 객체를 사용하여 위 HTML의 모든 정보를 표현할 수 있습니다:
{ tag: 'p', attrs: { className: 'app', id: 'appRoot'}, children: [ { tag: 'h1', attrs: { className: 'title' }, children: ['欢迎进入React的世界'] }, { tag: 'p', attrs: null, children: ['React.js 是一个构建页面 UI 的库'] } ] }
로그인 후 복사
하지만 JavaScript로 작성하기에는 너무 길고 구조가 명확하지 않습니다. HTML은 매우 복잡합니다.
그래서 React.js는 JavaScript 코드에서 HTML 태그 구조와 유사한 구문을 작성할 수 있도록 JavaScript 구문을 확장했습니다. 이는 컴파일 프로세스에서 HTML과 유사한 JSX 구조를 JavaScript의 객체 구조로 변환합니다.
import React from 'react' import ReactDOM from 'react-dom' class App extends React.Component { render () { return (
欢迎进入React的世界
React.js 是一个构建页面 UI 的库
) } } ReactDOM.render(
로그인 후 복사
Convert to
import React from 'react' import ReactDOM from 'react-dom' class App extends React.Component { render () { return ( React.createElement( "p", { className: 'app', id: 'appRoot' }, React.createElement( "h1", { className: 'title' }, "欢迎进入React的世界" ), React.createElement( "p", null, "React.js 是一个构建页面 UI 的库" ) ) ) } } ReactDOM.render( React.createElement(App), document.getElementById('root') )
로그인 후 복사
React.createElement는 태그 이름, 속성, 하위 요소 등을 포함하여 HTML 구조의 정보를 설명하는 JavaScript 객체를 구축합니다. 구문은
React.createElement( type, [props], [...children] )
로그인 후 복사
소위 JSX는 실제로 JavaScript 개체이므로 React 및 JSX를 사용할 때는 컴파일 과정을 거쳐야 합니다
JSX — React를 사용하여 구성 요소를 구성하고 babel로 컴파일 —> JavaScript 개체 —
ReactDOM.render()—> DOM 요소 —> 페이지에 삽입
![JavaScript 핵심 튜토리얼 [JS가 꼭 알아야 할 DOM BOM 연산]](https://img.php.cn/upload/course/000/000/041/61c56ae28d02a390.jpg)
![자바스크립트 심층 분석 [웹 프론트엔드의 기본은 알아야 한다]](https://img.php.cn/upload/course/000/000/041/61d3ff1c83b43350.jpg)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
