[React] JSX란? (with. Babel)

 

 

 

 

 

 

🌈 JSX란 무엇인가?

React를 이용하여 개발을 하는 사람이라면 JSX라는 문법을 한 번쯤 듣게 된다.

JSX를 리액트에서 무조건 사용해야하는것은 아니지만, JSX를 통해 얻는 이점이 많아 대부분의 개발자가 사용한다.

 

그렇다면 JSX란 무엇일까?

 

JSX는 JavaScript XML의 줄임말로 XML 형태로 작성되며, 아래 문법은 JavaScript에 XML을 확장한 JSX의 문법이다. 

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

 

그밖에 JSX의 특징은 아래와 같다.

 

▪ JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.

▪ 브라우저에서 실행되기 전에 바벨을 통해 일반적인 자바스크립트 코드로 변환된다.

▪ 공식적인 자바스크립트 문법은 아니다.

▪ JSX 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있다.

 

 

 

 

0️⃣ JSX와 일반적인 문법의 차이점

JSX를 사용하였을 때 render 함수의 반환 값을 XML 형식으로 간단히 표현할 수 있다.

/* JSX문법 */
class Example extends React.Component {
    render() {
        return <div>Hello World</div>;
    }
}

 

JSX를 사용하지 않고 구성하려면 React.createElement(component,props,...children)를 호출해야 한다.

/* 일반적인 JS문법 */
class Example extends React.Component {
    render() {
        return React.createElement("div", null, "Hello World");
    }
}

 

JSX는 코드 작성의 간편함과 분석을 쉽게 만들며, XML과 문법이 유사하기 때문에 중첩된 선언형 구조를 잘 나타낸다.

 

render되어야 하는 요소가 많아질수록 JSX를 사용하지 않는다면 코드를 파악하기 어려워져 유지보수에 많은 비용이 들게 될 것이다.

 

 

 

 

 

 

1️⃣ JSX를 위한 문법

◾ JSX 요소는 감싸져 있어야 한다

 

JSX 내부에 여러 요소가 있을 경우 반드시 부모 요소로 감싸야한다.

 

React에서는 부모 요소로 감싸기 위해 <React.Fragment> 태그 혹은 <> (빈 태그)를 사용한다.

return {
    <>
        <h1>Hello</h1>
        <h2>World</h2>
        <h3>Hello</h3>
        <h4>React</h4>
    </>
}

 

◾ 자바스크립트 값은 중괄호로 감싼다

 

JSX 내부에 자바스크립트 변수를 보여줘야 할 때는 {}로 감싸야한다.

const name = "Jinny";

return {
    <>
        <div>Hello, My name in {name}</div>
    </>
}

 

◾ Class와 Style 정의

 

HTML에서 class를 정의하기 위해서는 <div class="example"></div> 와 같이 정의할 수 있지만, JSX에서는 class 대신 className을 사용한다.

 

또한, JSX에서 style을 정의할 때 camelCase 형태의 style name을 사용해야 하며, css 속성 뒤에는 세미콜론 대신 쉼표를 사용한다.

const example = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "black",
    fontSize: "16px",
};

return {
    <div style={example}></div>
}

 

 

 

 

2️⃣ 바벨(babel)과 JSX의 관계

바벨은 ES6 문법을 ES5 문법으로 바꿔주는 역할을 한다. 

 

또한, 바벨은 JSX 문법을 JavaScript 문법으로 변환하는 기능도 가지고 있으며, React에서 JSX를 사용할 수 있게 하는 핵심적인 역할을 한다.

 

/* JSX */
function App() {
    return (
      <h1>Hello, JSX!</h1>
    );
}

/* 바벨을 통해 자바스크립트로 변환된 코드 */
function App() {
    return React.createElement("h1", null, "Hello, JSX");
}

 

 

 

 

 

 

 

 

📌 참고

• React Docs - JSX
• babel Docs