[React] JSX

 

React에서 사용하는 JSX에 대해 알아보겠습니다. 

JSX란? 

 

const App = <div>JSX</div>

위의 코드는 무엇일까요? HTML도 아니고...

위와 같은 문법을 JSX라고 합니다. JSX는 JavaScript 확장 문법입니다. 리액트 컴포넌트 파일에서 JSX형식으로 작성하면 babel 이 JavaScript로 변환을 해 줍니다.  Babel은 JavaScript의 문법을 확장해 주는 도구입니다. 지원되지 않는 최신 문법이나, 실험적인 문법들을 변환함으로 여러 환경에서 제대로 실행 할 수 있게 해 주는 역할을 합니다. 

 

babel은 위의 코드를 아래와 같이 변환시켜 줍니다. 

const App = React.createElement("div", null, "React");

우리가 JSX를 쓰는 이유는 간단합니다. 여러분은 위의 코드와 아래의 코드 중 어떤 것을 사용하실 건가요?

당연히 사용하기 편한 JSX를 사용할 것입니다. 또한 babel 과 같은 컴파일 과정에서 문법적 오류를 인지하기 쉽기 때문에 사용하기도 합니다. (가독성과 오류수정 면에서 탁월한 JSX!)

---

JSX 문법

1. 최상위 요소는 하나.

function App(){
	return (
		<div>
			<h1>JSX</h1>
		</div>
		<div>
			<h1>JSX</h1>
		</div>
	)
}

div태그가 병렬적으로 되어 있으므로 최상위 요소가 2개가 되어 오류를 발생시킵니다. 최상위 요소는 하나여야 합니다. 

 

2. 자식들을 바로 랜더링 하고 싶으면 <></>(Fragment)를 사용합니다. 

function App(){
	return (
    	<>
		<div>
			<h1>JSX</h1>
		</div>
		<div>
			<h1>JSX</h1>
		</div>
        </>
	)
}

위의 코드에는 Fragment가 최상위 요소가 되므로 문법오류가 없습니다. 

 

3. {자바스크립트 표현식}

function App() {
	const title = "JSX";
    return (
    	<>
        	<h1>title : {title}</h1>
        </>
    )
}

JSX 내부에서 코드를 {}으로 감싸면 자바스크립트 표현식을 사용할 수 있습니다. 

 

4. class 대신 className을 사용

class 대신 className을 사용해 class를 적용할 수 있습니다.