JSX란 무엇인가

JSX 란?

JSX는 JavaScript를 확장한 문법이다.

React 요소(element)를 만들 수 있게 해주는데, HTML에서 사용한 문법과 흡사한 문법을 사용한다. 생긴 게 HTML이랑 비슷해서, JSX로 React 요소를 편하게 만들 수 있다.

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

브라우저가 JSX를 이해할 수 있으려면 바벨을 설치해야한다.

JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아니다. 바벨에서는 여러 문법을 지원할 수 있도록 preset 및 plugin을 설정한다. 바벨을 통해 개발자들이 임의로 만든 문법, 혹은 차기 자바스크립트의 문법들을 사용할 수 있다.

const element = (
	<h1 className="greeting">
		Hello, world!
	</h1>
);

위와 같이 쉽게 쓴 코드를 아래와 처럼 변환해야 브라우저가 이해할 수 있기 때문. 이때 필요한 것이 바벨(Babel)

바벨은 코드를 변환해주는 것, 우리가 JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔주는 것이다.

const element = React.createElement(
	'hi',
	{className: 'greeting'},
	'Hello, world!'
);

JSX는 어플리케이션을 여러 가지 작은 요소로 나누어 관리할 수 있게 해준다.

여러 요소를 잘게 쪼개서 보기 쉽게 코드를 분리한 뒤 함께 렌더링하는 것.

 

JSX 코드

funtion App() {
	return (
		<div>
			Hello <b>react<b>
		</div>
	);
}

위의 코드는 아래와 같이 변환된다. (바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환되는 것)

funtion App() {
	return React.createElement("div", null, "Hello", React.createElement("b", null, "react"))
;
}

만약 컴포넌트를 렌더링(보여주는 것)할 때마다 JSX 코드가 아닌 위 코드 처럼 매번 React.createElemetn 함수를 사용해야한다면 매우 불편할 것이다. jsx를 사용하면 편하게 UI를 렌더링할 수 있다.

 

JSX의 장점

• 보기 쉽고 익숙하다
• HTML 코드를 작성하는 것과 비슷하니까. 가독성이 높고 작성하기도 쉽다. 자바 스크립트로 요소들을 일일이 만들지 않아도 된다.
• 활용도가 높다

JSX에서는 우리가 알고 있는 div나 span과 같은 HTML 태그를 사용할 수 있을 뿐만 아니라, 앞으로 만들 컴포넌트도 JSX 안에서 작성할 수 있다. 컴포넌트를 html 태그 쓰듯이 그냥 작성한다.

import ReactDOM from 'react-dom'
import './index.css';
import App from './App';

ReactDOM.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
	document.getElementById('root')
);

** ReactDOM.render 란?

이 코드는 컴포넌트를 페이지에 렌더링하는 역할을 하며, react-dom 모듈을 불러와 사용할 수 있다. 이 함수와 첫 번째 파라미터에는 페이지에 렌더링할 내용을 JSX 형태로 작성하고, 두 번째 파라미터에는 해당 JSX를 렌더링할 document 내부 요소를 설정한다. 위의 코드를 보면, id가 root인 요소 안에 렌더링하도록 설정했다.

**React.StrictMode란?

React.StrictMode는 리액트 프로젝트에서 리액트의 레거시 기능들을 사용하지 못하게 하는 기능이다. 이를 사용하면 문자열 ref, componenWillMount 등 나중에는 완전히 사라지게 될 옛날 기능들을 사용했을 때 경고를 출력한다.