JSX

1. 개요

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

위의 태그 문법은 문자열도, HTML도 아니다. 자바스크립트를 공부할 때에는 한 번도 본 적이 없는 형태의 문법이다. 위와 같은 문법을 JSX이라고 불리며 리액트에서 사용되는 문법이다. 리액트에서는 UI가 어떻게 생겨야 하는지 설명하기 위해 JSX를 사용하므로 JSX의 개념에 대해 숙지해야 한다.

2. JSX란?

XML과 매우 비슷하게 생긴 JSX는 자바스크립트의 확장 문법이다. 이러한 JSX의 코드는 브라우저에서 실행되기 전 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

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

위의 코드가 아래와 같이 변환된다.

function App() {
  return React.createElement('h1', null, 'Hello World!');
}

위의 두 개의 코드를 보면 JSX의 코드가 훨씬 직관적으로 느껴진다. 만약 React.createElement함수를 사용하여 개발을 한다면 매우 불편할 것이다. 반대로 JSX를 사용하면 매우 편하게 UI를 렌더링을 할 수 있다.

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

Babel은 무엇인가? Babel은 자바스크립트의 문법을 확장해주는 도구이다. 아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로써 구형 브라우저같은 환경에서도 제대로 실행 할 수 있게 해주는 역할을 한다. $ npx create-react-app을 실행할 경우 babel를 별도로 설정을 하지 않아도 된다. Babel Babel 사용해보기

3. JSX의 기본 규칙

JSX가 JavaScript로 제대로 변환되기 위해서는(에러가 나지 않기 위해서는) 지켜야할 몇 가지 규칙이있다.

3-1. 꼭 닫혀야 하는 태그

import React from "react";
import Header from "./Header";

function App() {
  return (
    <div>
      <Header />
      <div>
    </div>
  );
}

위의 코드는 오류가 발생한다.

<Header />컴포넌트 아래 줄에 있는 <div>태그가 닫혀있지 않기 때문이다.

HTML에서는 input 또는 br태그를 할 때 닫지 않고 사용하기도 하는데 리액트에서는 닫아야 한다. 태그와 태그 사이에 내용(요소)이 들어가지 않을 때, Self Closing태그 라는 것을 사용해야 한다. 위의 Header컴포넌트를 사용 할 때에도 Self Closing태그를 사용했다.

3-2. 꼭 감싸져야하는 태그

import React from "react";
import Header from "./Header";

function App (){
    return (
        <Hedader />
        <div>Hello Everyone!</div>
    )
}

위의 코드는 오류가 발생한다.

<Header />컴포넌트와 <div></div>태그가 하나의 태그로 감싸여있지 않기 때문이다. 이때 주로 리액트의 Fragment라는 것을 사용한다. <React.Fragment></React.Fragmen>또는 <></>

import React from 'react';
import Header from './Header';

function App() {
  return (
    <React.Fragment>
      <Hedader />
      <div>Hello Everyone!</div>
    </React.Fragment>
  );
}

위의 코드 처럼 태그를 작성할 때 이름 없이 작성을 하게 되면 Fragment가 만들어지는데, Fragment는 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않는다.

3-3. JSX안에 자바스크립트 값 사용하기

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

import React from 'react';
import Header from './Header';

function App() {
  const name = 'HD';
  const numArr = [1, 2, 3, 4, 5];
  return (
    <React.Fragment>
      <Hedader />
      <div>Hello {name}!</div>
      <span>{numArr.map((num) => num)}</span>
      {name === 'HD' ? <span>Welcome HD!</span> : null}
      <img src={user.avatarUrl}></img>
    </React.Fragment>
  );
}

3-4. style과 className

인라인 스타일로 style를 작성하는 경우 객체 형태로 작성해야 하며, background-color처럼 -로 구분되어 있는 이름들은 backgroundColor처럼 camelCase 형태로 네이밍 해줘야 한다.

import React from 'react';
import Header from './Header';

function App() {
  return (
    <React.Fragment>
      <Hedader />
      <div
        style={{
          backgroundColor: 'black',
          color: 'white',
          padding: '10px 20px',
        }}
      >
        Hellow Everyone!
      </div>
    </React.Fragment>
  );
}

class를 사용하여 외부 스타일 시트를 사용할 경우 HTML에서는 class라는 어트리뷰트를 사용했는데 JSX에서는 className를 사용한다.

/* App.css */

.gray-box {
  background: gray;
  width: 64px;
  height: 64px;
}

import React from 'react';
import Header from './Header';
import './App.css';

function App() {
  return (
    <React.Fragment>
      <Hedader />
      <div className="gray-box">Hellow Hellow Everyone!!</div>
    </React.Fragment>
  );
}

3-5. 주석

JSX 내부의 주석은 {/* 내용 */}의 형태로 작성한다.

열리는 태그 내부에서는 // 내용 의 형태로 작성한다.

4. JSX의 장점

개발자 경험(DX) 개선: 표현력이 뛰어나 코드를 읽기 쉽다. XML과 문법이 유사하여 중첩된 선언형 구조를 더 잘 나타낸다.
팀의 생산성 향상: 전문 개발자 외에도 개발 지식이 있는 팀원이 있다면 직접 코드를 수정할 수도 있다. JSX는 HTML과 비슷하여 이들에게도 친숙하기 때문이다.
문법 오류와 코드량 감소: 작성해야 할 코드가 줄어들며, 이는 곧 실수나 반복으로 인한 스트레스를 줄여준다.

5. Conclusion

JSX의 공부는 순조롭게 이루어졌다. 리액트를 공부하고 여러 프로젝트를 진행하면서 많이 사용했던 JSX였기 때문이다. 아무런 의문 없이 "아 리액트에선 이렇게 해야지" 하고 생각하며 보내왔고 앞으로도 React를 많이 사용할 예정이므로 JSX를 잘 다루어보자 처음 JSX를 접했을 때도 아무런 위화감을 느끼지 않았다. "어떻게 변수에 태그를 할당할 수 있지?"라는 의문조차가 없었다. 메타에서 잘 만들어 주었으니 잘 써야겠다:)

참고

JSX 소개 [React 기초] JSX란? / JSX 문법 4. JSX의 기본 규칙 알아보기 3.1 JSX의 정의와 장점

📅 2022-07-16

PreviousReact란?NextVirtual DOM

Last updated 1 year ago