(React) JSX에 대해

JSX는?

리액트 개발시 사용하는 자바스크립트의 확장 문법.

자바스크립트 + XML 의 형태.

const element = <h1>Hello world!</h1>

위 코드와 같이 html가 섞인 느낌의 자바스크립트 문법이다.

JSX 사용 이유?

JSX를 이용하면 리액트의 장점중 하나인 선언형 개발을 함으로써 이해하기 쉬운 개발을 할 수 있다.

html의 형태를 가지고 있기 때문에 결괏값으로 출력되는 내용을 쉽게 확인할 수 있다.

ex)

const element = (
	<h1 className="greeting>
		Hello world!
	</h1>
)
//JSX 코드

const element = React.createElement(
	'h1',
	{className: 'greeting},
	'Hello world!'
)
//순수 자바스크립트 코드

위 두개의 코드는 같은 엘리먼트를 생성한다.

두 가지 중, JSX 을 이용한 코드가 엘리먼트의 형태를 더 직관적으로 보여주는 것을 알 수 있다.

JSX는 엘리먼트의 모양, 이벤트 핸들링, 상태 변화를 한 곳에 모아 놓음으로써 직관적이고 명쾌한 React개발을 도와주는 문법이다.