[React] JSX 문법

JSX (JavaScript XML)

---

JSX란, JavaScript를 확장한 문법입니다.

• JSX는 JavaScript와 XML/HTML을 합친 것이라고 볼 수 있습니다.
• React에서는 JSX를 이용하여 화면에 UI를 나타냅니다.
• JSX를 사용하면 하나의 파일에 HTML 구조와 JavaScript를 함께 사용할 수 있습니다.
  • 기존에는 .html 파일과 .js 파일로 구분하여 작성해 왔습니다.
• 브라우저에서 실행하기 전 Babel을 사용하여 일반 JavaScript 형식의 코드로 변환됩니다.
• Babel에서 직접 확인해 보기

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

  상단의 코드를 Babel 사이트로 접속한 후 입력하시고, 결과를 확인해 보세요.
  

// JSX 문법
function App() {
	return (
		<h1>안녕하세요</h1>
	);
}

// JSX를 사용하지 않는 코드
function App() {
	return React.createElement("h1", null, "안녕하세요");
}

• createElement() : JSX 코드를 JavaScript 코드로 변환하는 역할을 해주는 함수
• 그럼 React에서는 필수적으로 JSX를 사용해야 하나요 ? No! 필수는 아닙니다. 컴포넌트를 작성하는 다른 방법도 있지만, 대부분의 React 개발자는 JSX의 간결함을 선호하며 대부분의 코드에서 JSX를 사용합니다.
  

JSX 문법

---

1. 반드시 부모 요소 하나가 감싸야 하는 형태여야 합니다.

• 코드가 한 줄인 경우, 부모 요소로 감싸지 않아도 정상적으로 작동합니다.
• 코드가 여러 줄인 경우, 부모 요소로 감싸지 않으면 에러가 발생합니다.
  • <div>를 사용하여 감싸는 방법
  • 마크업에 <div>를 추가하고 싶지 않은 경우 <>와 </> (Fragment)를 사용할 수 있습니다.
• 왜 여러 JSX 태그를 하나로 감싸줘야 하나요?
  

JSX는 HTML처럼 보이지만 내부적으로는 JavaScript 객체로 변환됩니다. 하나의 배열로 감싸지 않은 함수에서는 두 개의 객체를 반환할 수 없습니다.
따라서 또 다른 태그나 Fragment로 감싸지 않으면 두 개의 JSX 태그를 반환할 수 없습니다.

• Fragment란?
  

Fragment(<></>)는 브라우저상의 HTML 트리 구조에서 흔적을 남기지 않고 그룹화해 줍니다.

// 정상적으로 동작하는 코드
function App() {
	return (
		<div> 안녕하세요 </div>
	);
}

// 정상적으로 동작하는 코드
function App() {
	return (
		<div>  {/* <div>태그로 감싸줌 */}
			<h1>안녕하세요</h1>
			<h2>고양이 좋아합니다.</h2>
		</div>
	);
}

// 꼭 div태그가 아니고 빈 태그(Fragment)여도 감싸주기만 한다면 가능합니다.
function App() {
	return (
		<>     {/* Fragment로 감싸줌  */}
			<h1>안녕하세요</h1>
			<h2>고양이 좋아합니다.</h2>
		</>
	);
}

// 에러가 발생하는 코드
function App() {
	return ( {/* 부모요소로 감싸주지 않은 형태 */}
			<h1>안녕하세요</h1>
			<h2>고양이 좋아합니다.</h2>
	);
}

2. JavaScript 표현식을 사용할 수 있습니다.

JSX 내부에서 코드를 중괄호(`{}`)로 감싸면 JavaScript 표현식을 사용할 수 있습니다.

function App() {
	const name = '고양이'; // JavaScript 표현식
	return (
		<div>
			<p>Hello</p>
			<p>{name}</p>
		</div>
	);
}

3. JSX에서는 class가 아닌 className을 사용합니다.

<!-- 기존 HTML 문서 -->
<div class="main">안녕하세요</div>

// JSX
<div className="main">안녕하세요</div>

4. 모든 태그를 닫아야 합니다.

JSX에서는 태그를 명시적으로 닫아야 합니다. <img> 태그와 같이 자체적으로 닫는 태그도 반드시 <img /> 로 작성해야 합니다.

<>
	<img
		src="http://abc.jpg"
		alt="image"
	/>
	<ul>
		<li> red </li>
		<li> orange </li>
		<li> yellow </li>
	</ul>
</>

참고 자료

• React 공식문서 : JSX 소개
• React 공식문서 : JSX 없이 사용하는 React