[React] JSX란?

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

리액트에선 본질적으로 렌더링 로직이 UI 로직(이벤트 처리 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들인다. 리액트는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신 둘 다 포함하는 "컴포넌트"라고 하는 느슨하게 연결된 유닛으로 관심사를 분리한다...(중략)...리액트는 JSX 사용이 필수가 아니지만 대부분의 사람은 자바스크립트 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각한다. 또한 리액트가 더욱 도움 되는 에러, 경고 메시지를 표시할 수 있게 해준다

 

https://www.geeksforgeeks.org/jsx-full-form/

JSX Full Form - GeeksforGeeks

JSX는 Javascript XML의 약자다. 단순히 자바스크립트의 구문 확장이다. 이것은 내가 (자바스크립트 코드 안에서) 리액트에서 HTML을 작성할 수 있게 해준다. 리액트에서 JSX를 써서 템플릿을 만드는 건 쉽지만 단순한 템플릿 언어가 아니라 자바스크립트의 모든 기능이 함께 제공된다
일반 자바스크립트로 바꾸면서 최적화를 수행하기 때문에 일반 자바스크립트보다 빠르다. 분리된 파일에서 마크업, 로직을 분리하는 대신 리액트는 이를 위해 컴포넌트를 사용한다

 

리액트 프로젝트를 만들면 기본 제공되는 app.js의 코드를 보면 이런 형태의 골때리는 모습을 하고 있다.

 

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

 

자바스크립트랑 HTML이 뒤섞여서 이상한 모습인데 이것이 JSX다. 보면 자바스크립트보단 HTML 관련 코드들이 더 많아서 HTML과 유사해 보인다.

이 형태의 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용해 일반 자바스크립트 형태의 코드로 바뀐다. 번들링의 번들(bundle)은 묶음이라는 뜻이 있는데 말 그대로 파일들을 묶어서 연결하는 걸 말하고, 바벨은 JSX를 일반 자바스크립트로 컴파일하는 기능을 가진 자바스크립트 컴파일러다.

"리액트를 다루는 기술"에선 아래의 JSX 코드가 자바스크립트 코드로 바뀌는 과정을 보여주고 있다.

 

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

 

이 코드가 바벨을 거치면 아래 코드로 바뀐다.

 

function App() {
  return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

 

위의 코드들은 당연히 에러를 내지 않는다. 모두 같은 형태의 hello react를 보여준다.

이 JSX에도 문법이 있는데 그 중 하나는 아래와 같다.

 

감싸인 요소

 

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. 예를 들어 이런 코드는 작동하지 않는다

 

function App() {
  return (
    <h1>리액트 테스트</h1>
    <h2>2번째 h 태그</h2>
  );
}

 

"여러 요소가 있다면"이란 조건이 붙었듯 h1 태그만 있다면 에러는 발생하지 않는다.

이걸 해결하려면 2개의 h 태그를 div 안에 넣으면 된다.

 

function App() {
  return (
    <div>
      <h1>리액트 안녕</h1>
      <h2>2번째 h 태그</h2>
    </div>
  );
}

 

이렇게 해야 하는 이유는 가상 DOM에서 컴포넌트 변화를 감지할 때 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이뤄져야 한다는 규칙이 있기 때문이다. 만약 위 코드에서 div를 쓰고 싶지 않다면 'Fragment'를 입력하거나 아무것도 쓰지 않으면 된다. 둘 다 Fragment를 사용하는 방법이다.