[React] JSX

　JSX는 JS 확장 문법입니다. XML과 매우 비슷하게 생겼습니다. full name부터가 'JavaScript XML'입니다. JSX는 브라우저에서 실행되기 전 번들링 과정을 거치는데요. 이때 babel-loader(webpack의 기능 중 하나)가 번들링 과정에서 JSX를 일반 JS 코드로 변환합니다.

---

Fragment

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 합니다. <div>로 감싸거나 리액트 v16부터는 <Fragment>로 감쌀 수 있습니다. <Fragment>는 <>로 대체될 수 있습니다. 아래 코드처럼 말이죠.

import { Fragment } from 'react';

function App() {
	return (
		<>
			<h1>Hello World!</h1>
		</>
	)(;
}

export default App;

Expression

JSX는 단순히 DOM 요소를 렌더링하는 것에 그치지 않습니다. JSX 안에서 JS 표현식을 사용할 수 있게 해줍니다. Java의 Thymeleaf가 떠오르기도 합니다.

function App() {
	const name = 'Hello';
	return (
		<>
			<h1>{name}</h1>
		</>
	);
}

export default App;

---

조건부 연산자

JSX에서 표현식을 사용할 수 있지만 if문을 사용할 수는 없습니다. 조건에 따라 분기처리를 하고 싶다면 조건부 연산자를 사용해야 합니다. 조건부 연산자의 또 다른 이름은 삼항 연산자입니다.

function App() {
	const name = 'Hello';
	return (
		<>
			{name === 'Hello' ? (
				<h1>World!</h1>
			) : (
				<h1>bye</h1>
			)}
		</>
		);
}

export default App;

&& 연산자를 사용한 조건부 렌더링

특정 조건을 만족할 때 내용을 보여 주고, 만족하지 않을 때 아무 것도 렌더링 하지 않아야 할 때 사용합니다.

function App() {
	const name = 'Hello';
	return (
		<>
			{name === 'Hello' ? 
				<h1>World!</h1>
			 : 
				null
			}
		</>
		);

여기서 더 짧게 표현할 수 있습니다. 아래 코드는 위 코드와 동일하게 작동합니다.

function App() {
	const name = 'Hello';
	return (
		<>
			{name === 'Hello' && <h1>World!</h1> }
		</>
		);

---

다음 글은 vscode extension에 대해 다룹니다.

💁‍♂️reference

리액트를 다루는 기술

김민준 지음ㅣ길벗ㅣ2019ㅣ도서 정보

Do it! 리액트 프로그래밍 정석

박호준 지음ㅣ이지스퍼블리싱ㅣ2020ㅣ도서 정보

EOD.