JSX (JavaScript syntax extension)

자바스크립트의 확장 문법으로 화면에서 UI가 보이는 모습을 나타내준다. 

JSX는 UI를 보이게할때 자바스크립트(logic)과 HTML구조(markup)을 같이 사용할 수 있어 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 쉽게 구현하게한다. 

 

만약 JSX를 사용하지 않고 리액트를 사용하면 이렇게 사용해야한다. 

React.createElement API를 사용해 객체를 생성하고 In-Memory에 저장한다. 

ReactDOM.render 함수로 웹 브라우저에 그린다. 

const myelement = React.createElement('h1', {}, 'I do not use JSX');
->
ReactDOM.render(myelement, document.getElementById('root'));

 

babel이 자동적으로 변환을 해주는 작업을 해주는데

이런식으로 변환을 해준다. 

function hello() {
	return <div>Hello world!</div>;
}
->
function hello() {
	return /*_PURE_*/React.createElement("div", null, "Hello world!");
}

 

모든 UI를 만들때마다 createElement로 컴포넌트를 만들기 복잡하니

JSX를 사용하고 바벨이 다시 createElement로 바꿔서 사용한다. 

 

# 사용할때 주의해야할 문법 규칙들

컴포넌트에 엘리먼트 요소가 여러개 있다면 반드시 부모 요소 하나로 감싸줘야한다. 

// 잘못된 코드다
functino hello() {
	return (
    <div>Hello world!</div>
    <div>what are you doing</div>
    )
}

// 올바른 코드
function hello() {
	return <div>
    	<div>Hello world!</div>
        <div>what are you doing</div>
        </div>;
}

이렇게 <div>요소로 여러개의 요소들을 감싸줘야한다.