JSX이란?
JSX에 대해 설명하는 페이지입니다.
목차
개요
이번 글에서는 JSX의 개념 및 문법, 장점 등에 대해 설명하겠습니다.
JSX의 개념
JSX이란 JavaScript XML의 약자로, 자바스크립트에서 XML이나 HTML 같은 구문을 사용할 수 있도록 하는 자바스크립트의 확장 문법입니다. 비공식 문법으로서, JSX 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 Babel을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다. JSX는 주로 React에서 UI 컴포넌트를 정의할 때 사용되며, JSX를 사용하면 자바스크립트 코드 내에 HTML 요소를 쉽게 작성하고 관리할 수 있다는 장점이 있습니다.
React에서 JSX 코드는 Babel에 의해 다음과 같이 변환됩니다.
변환 전
const element = <h1>Test</h1>;
변환 후
const element = React.createElement("h1", null, "Test");
JSX의 장점
가독성JSX 표현을 사용하지 않고 createElement를 직접 사용하면 UI를 구성할 때 가독성이 좋지 못하다는 단점이 있습니다. 이와 달리 JSX는 HTML과 유사한 구문으로 직관적이며, UI 코드를 작성할 때 가독성이 좋습니다.
활용도JSX를 사용하면 div, span, p와 같은 HTML 태그 뿐만 아니라 직접 만든 컴포넌트로 JSX 안에서 작성할 수 있다는 장점이 있습니다.
JSX 문법
감싸인 요소
컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 합니다.
const element = (
<div>
<h1>Top</h1>
<h2>Bottom</h2>
</div>
);
자바스크립트 표현식
JSX에서 중괄호를 사용하여 자바스크립트 표현식을 작성할 수 있습니다.
const str = "Hello, World!";
const element = <p>{str}</p>;
조건문 연산자
JSX 내부의 자바스크립트 표현식에서는 if문을 사용할 수 없습니다. 대신 삼항 연산자를 사용하여 조건부 연산을 할 수 있습니다.
const num = 1;
const element = (
<div>
{num === 1 ? <p>num은 숫자 1입니다.</p> : <p>num은 숫자 2입니다.</p>}
</div>
);
AND 연산자
AND 연산자(&&)을 사용하여 조건부 렌더링을 할 수 있습니다.
const num = 1;
const element = <div>{num === 1 && <p>num은 숫자 1입니다.<p>}</div>;
카멜 표기법(camelCase)
JSX에서 inline css를 적용할 때 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어야 합니다. 또한 attribute의 경우 기존 css에서 background-color와 같이 -를 사용하는 것과 달리 backgroundColor 처럼 카멜 표기법(camelCase)로 작성합니다.
const style = {
backgroundColor: "black";
fontSize: "1.5rem"
}
const element = <p style={style}>Test</p>;
className
기존의 HTML에서는 css 클래스를 사용할 때 class라는 이름을 사용하지만, JSX에서는 className이라는 이름을 사용합니다.
const root = <div className="root"></div>;
닫힌 태그
HTML에서는 코드를 작성할 때 태그를 닫지 않은 상태로 코드를 작성해도 오류가 발생하지 않는 경우가 있지만, JSX에서는 반드시 태그를 닫아야 합니다.
const root = <div className="root" />;
주석
JSX에서 주석을 사용하려면 다음과 같이 {/* */}와 같은 형태로 작성합니다.
const element = (
<div>
{/* 주석 */}
<h1>제목</h1>
<p>내용</p>
</div>
);
