[React] JSX

최근 노마드코더의 React 무료 강의를 통해 React에 대해서 조금 공부해보고 있다.
이따금씩 올라올 React 관련 내용은 노마드코더의 무료 강의에서 배운 내용을 기준으로 일부 지식을 검색하여 포스팅할 예정이다.

 

📖 JSX란?

간단히 말하면 JavaScript의 확장 문법이다.
JavaScript 내에서 HTML 태그 생성 코드를 그대로 사용할 수 있는 기능을 제공한다. JavaScript 카테고리로 생성하지 않은 이유는 해당 문법을 통해 UI를 정의하려면 React와 함께 사용되어야 하기 때문이다. 또한, JS엔진에서 JSX 문법을 정확히 해석하기 위해서 Babel을 통한 구문 변환이 필요하다.

즉, JSX를 이용하기 위해서는 아래 2가지가 선행되어야 한다.

• JSX를 지원하는 프레임워크 사용
  (최초엔 React만 지원했으나, 현재는 여러 웹 프레임워크가 지원하는 중)
• Babel 라이브러리 등록

🧐Babel이란?

Babel은 간단히 ES2015+ 구문을 ES5 형태로 호환되게 만드는 JS 트랜스 컴파일러이다. 바벨을 이해하기 위해서는 JS 구문 변천사에 대해서 조금 알아야 한다. 이 내용을 굉장히 재밌게 설명해주신 유튜버가 있으니 아래 링크를 참고하길 바란다.
https://youtu.be/wcsVjmHrUQg?si=lC2VWk-NDuQJVHaN (드림코딩 - 자바스크립트의 역사와 현재 그리고 미래)

👀 예제 코드

아주 간단한 예제 코드를 보여주려고 한다. greeting이라는 className으로 지정된 h1요소를 명시하는 코드이다. 내용은 국룰인 Hello World!로 하겠다. 사실, 예제 코드의 경우 React 공식 홈페이지를 방문하면 더 다양한 내용을 확인할 수 있다. 그래서 아래 예제 코드는 크게 의미가 없다고 보면 된다.

// 단, JS엔진에서 JSX를 인식할 수 있도록, Babel을 통한 코드 변환을 위한 라이브러리 추가가 필요
// https://unpkg.com/@babel/standalone/babel.min.js
// type="text/babel"
const element = (
	<h1 className="greeting">
		Hello, world!
	</h1>
);

// Don't use this pattern in React.js
// >>>>
const org_element = React.createElement("h1", {
	classname: "greeting"
	}, "Hello, world!");

React에서는 위 문법 형태로 사용한다고 보면 된다. 아래 문법의 경우에는 JSX를 이용하지 않고 순수 React만을 통해서 웹 페이지에 요소를 추가하는 방법이다. 현재는 사용하지 않는 문법으로 보면 된다. 위 코드에 비해 길이도 길고, 기존에 HTML 코드 형태와 차이가 커서 가독성도 굉장히 떨어지는 편이다.
(위 코드와 아래 코드는 동일한 동작을 수행하기는 한다.)