JSX 이해하기

리액트 프로젝트 생성

리액트 프로젝트를 생성하기 위해서는 node.js의 npm이 필요하다. node.js를 설치했다면 터미널에 다음과 같이 입력한다.

npm install -g yarn
// 설치가 안된다면
sudo npm install -g yarn

yarn create react-app hello

cd hello

yarn start

// 타입스크립트도 프로젝트를 만들고싶다면
npx create-react-app hello --template typescript 
npm start

그 후, http://localhost:3000에 들어가보면, 자신의 리액트 프로젝트의 첫 화면이 나올 것이다.

그리고나서 /src/App.js 혹은 App.tsx를 보자.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

이런식으로 코드가 작성되어있다. 여기서 App이라고 하는 것이 컴포넌트이다. function 키워드를 사용해 컴포넌트를 만들어준 뒤 렌더링된 것이다.

JSX

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

간단한 코드로 변환되는 과정을 보자.

// JSX
function App() {
    return (
        <div>
            Hello <b>react</b>
        </div>
    );
}

// 바벨로 변환한 자바스크립트 코드
function App() {
    return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

createElement 함를 통해 모든 태그들을 구현해주기엔 매우 불편한 작업이 될 수 있기 때문에, JSX를 통해 편하게 UI 작업을 할 수 있게 된다.

하지만 JSX는 공식적인 자바스크립트 문법이 아니다. 리액트 개발에 있어 사용되는 문법임을 알고있자.

JSX의 장점

• 보기 쉽고 익숙하다.

JSX 문법의 코드는 HTML로 코드를 작성하는 것과 비슷하다. 사실상 이것이 JSX 사용의 주된 이유이기도 하다.

• 높은 활용도

JSX에서는 HTML 태그와 더불어 앞으로 만들어질 컴포넌트들도 활용할 수 있다. App.tsx에서 만들어진 App 컴포넌트도 HTML의 태그처럼 다른 파일의 코드에서 작성될 수 있다.

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

위 코드에서 App을 컴포넌트로 활용하는 모습을 확인할 수 있다.

리액트 문법

JSX는 편리하지만, 올바르게 사용하기 위해 몇 가지 규칙을 준수해야한다.

감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸주어야 한다. 그 이유로 Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교하기 위해 하나의 DOM 트리 구조를 이루어야 한다는 규칙때문이다.

보통 감싸기위해 div 태그를 이용했으나, 리액트의 업데이트 된 기능 중 Fragment라는 기능은 더욱 간편하게 코드를 감쌀 수 있게 만들어준다.

// typescript
import { Fragment } from 'react';

function App() {
    const name: string = "User";
    return (
        <>
            <h1> {name} hello ! </h1>
        </>
    );
}

export default App;

결과가 잘 나오는것을 확인할 수 있다.

여기서, name이라는 변수는 {}을 통해 감싸주어 JSX 내부에서 사용할 수 있다.

if문 사용 불가

JSX 내부의 자바스크립트 표현에서는 if문을 사용할 수 없다. 하지만, {} 내부에 조건부 연산자를 사용할 수 있는데, 삼항연산자라고 한다.

{ 조건 ? 조건이 맞을 경우의 동작 : 조건이 틀릴 경우의 동작 }의 형식으로 사용하면 된다.

위의 코드를 조금 변경해보자.

import React from "react";
import "./App.css";
import { Fragment } from "react";

function App() {
  const name: string = "Users";
  return (
    <>{name === "User" ? <h1> {name} hello ! </h1> : <h1> {name} bye </h1>}</>
  );
}

export default App;

name이 "User"일 경우에는 위의 결과가 그대로 나오지만, "Users"라고 했을 때는 다른 결과가 나오는 것을 확인할 수 있다.

정라하자면, JSX는 HTML과 비슷하지만 완전히 똑같지는 않다. XML형식이지만 실제로는 자바스크립트 객체이기 때문에, 문법도 조금 차이가 난다. JSX가 단독으로 쓰이는 경우는 거의 없기 때문에, 리액트의 다른 요소들도 알아가면서 여러 방면으로 활용할 수 있도록 해야한다.