[ReactJS] JSX

JSX란?

자바스크립트의 확장 문법으로 XML과 매울 비슷하게 생겼으며, 이런 형식으로 작성한 코드는 브라우저에서 실행되기 이전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형식으로 변환된다. 

 

-JSX 예제

 

 

	function App() {
	return (
	<div>
	test
	</div>
	)
	}

view raw jsx.js hosted with ❤ by GitHub

 

 

● JSX의 장점

- 가독성이 좋고 익숙하다.

HTML코드와 비슷하기때문에 가독성도 좋으며, 읽기도 쉽다.

 

- 높은 활용도

HTML 태그 뿐만이 아니라 컴포넌트 또한 JSX 안에서 작성할 수 있다

ex)

 

	import React from 'react';
	import ReactDOM from 'react-dom';
	import './index.css';
	import App from './App';
	ReactDOM.render(
	<React.StrictMode>
	<App/>
	</React.StrictMode>
	document.getElementById('root')
	);

view raw jsx2.js hosted with ❤ by GitHub