리액트 배우기 - Writing Markup with JSX (feat. New JSX Transform)

Overview

이번 시간에는 JSX와 관련된 리액트 공식 문서 글을 읽어보도록 하겠습니다. 최신 리액트 공식 문서는 생각보다 깊이 있는 설명은 안보이는거 같네요...? 그래서 이전 공식 문서 글도 참고했습니다.

Writing Markup with JSX

원문 참고 : https://react.dev/learn/writing-markup-with-jsx

JSX는 자바스크립트의 구문 확장으로, 자바스크립트 파일 내에 HTML과 같은 마크업을 작성할 수 있습니다. 컴포넌트를 작성하는 다른 방법들도 있지만, 대부분의 리액트 개발자들은 JSX의 간결함을 선호하며, 대부분의 코드베이스에서 JSX를 사용합니다.

JSX: Putting markup into JavaScript

웹은 HTML, CSS, 자바스크립트를 기반으로 만들어졌습니다. 여러 해 동안 웹 개발자들은 HTML로 콘텐츠를, CSS로 디자인을, 자바스크립트로 로직을 작성했습니다. 페이지의 로직이 자바스크립트에 따로 존재하는 동안 HTML 내부에는 콘텐츠가 표시되었습니다.

그러나 웹이 더 인터렉티브 되면서 로직은 점점 더 컨텐츠를 결정하게 되었습니다. 이것이 리액트에서 렌더링 로직과 마크업이 같은 장소, 즉 컴포넌트에 함께 존재하는 이유입니다.

버튼의 렌더링 로직과 마크업을 함께 유지하면 모든 편집에서 서로 동기화 상태를 유지할 수 있습니다. 반대로 버튼의 마크업과 사이드바의 마크업과 같은 서로 관련이 없는 정보들은 서로 분리되어 있어서 둘 중 하나를 스스로 변경하는 것이 더 안전합니다.

각 리액트 컴포넌트는 리액트가 브라우저에 렌더링하는 마크업을 포함할 수 있는 자바스크립트 함수입니다. 리액트 컴포넌트들은 그 마크업을 나타내기 위해 JSX라고 불리는 구문 확장을 사용합니다. JSX는 HTML과 많이 닮았지만 조금 더 엄격하고 동적인 정보를 보여줄 수 있습니다. 이를 이해하는 가장 좋은 방법은 일부 HTML 마크업을 JSX 마크업으로 전환하는 것입니다.

Introducing the New JSX Transform

원문 참고 : https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform

다소 옛날 글이지만 볼만 합니다. 리액트 17에서 JSX가 업그레이드 된 내용이네요. ㅎㅎ

리액트 17은 새로운 기능을 포함하고 있지 않지만 JSX 변환의 새로운 버전을 지원할 것입니다. 이번 게시물에서는 무엇인지, 어떻게 시도해 볼 수 있는지 설명하겠습니다.

What’s a JSX Transform?

브라우저들은 JSX를 즉각적으로 이해하지 못하기 때문에 대부분의 React 사용자들은 JSX 코드를 일반 자바스크립트로 변환하기 위해 Babel이나 TypeScript와 같은 컴파일러에 의존합니다. Create React App이나 Next.js와 같은 미리 구성된 많은 툴킷들도 내부적으로는 JSX 변환을 포함합니다.

리액트 17 릴리스와 함께 JSX 변환을 몇 가지 개선하고 싶었지만 기존 설정을 깨트리고 싶지 않았습니다. 이것이 바로 업그레이드를 원하는 사람들을 위해 우리가 Babel과 협력하여 JSX 변형의 새로운 재작성 버전을 제공한 이유입니다.

새 변환으로 업그레이드하는 것은 완전히 선택 사항이지만 다음과 같은 몇 가지 이점이 있습니다:

• 새로운 변환을 사용하면 React를 import 하지 않고도 JSX를 사용할 수 있습니다. (예전에는 매번 React를 import 해야 했습니다)
• 설정에 따라 컴파일된 출력이 번들 크기를 약간 개선할 수도 있습니다.
• 향후 개선을 통해 React을 학습하는 데 필요한 개념의 수를 줄일 수 있습니다.

이 업그레이드는 JSX 구문을 변경하지 않으며 필요하지도 않습니다. 기존 JSX 트랜스폼은 정상적으로 작동할 것이며, 이에 대한 지원을 제거할 계획은 없습니다.

이제 이전 버전과 새로운 버전의 차이점에 대해 자세히 알아보도록 합시다.

What’s Different in the New Transform?

JSX를 사용하면 컴파일러가 브라우저가 이해할 수 있는 리액트 함수 호출로 변환합니다. 기존 JSX 변환은 JSX를 React.createElement(...) 호출로 전환했습니다.

예를 들어 소스 코드가 다음과 같다고 가정해 봅시다:

import React from 'react';

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

내부 로직에 의해, 이전 버전의 JSX 변환은 일반 자바스크립트로 변환합니다:

import React from 'react';

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

그러나 이는 완벽하지 않습니다:

• JSX가 React.createElement로 컴파일되었기 때문에, JSX를 사용하는 경우 React가 스코프에 있어야 했습니다.
• React.createElement가 허용하지 않는 성능 향상 및 단순화가 있습니다.

이러한 문제를 해결하기 위해 리액트 17은 바벨이나 타입스크립트와 같은 컴파일러들만이 사용할 수 있도록 설계된 리액트 패키지에 두 가지 새로운 진입점을 도입하였다. JSX를 React.createElement로 변환하는 대신, 새로운 JSX 변환은 React 패키지의 새로운 entry points에서 special functions를 자동으로 import하여 호출합니다.

소스 코드가 다음과 같다고 가정해보자:

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

새로운 JSX 변환은 다음과 같이 구성됩니다:

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

원래 코드가 어떻게 더 이상 JSX를 사용하기 위해 리액트를 가져올 필요가 없었는지 주목하세요! (그러나 Hooks를 사용하거나 React가 제공하는 다른 exports를 사용하려면 React를 import 해야 합니다.)

이 변경 사항은 기존의 모든 JSX 코드와 완벽하게 호환되므로 컴포넌트를 변경할 필요가 없습니다. 궁금하신 분들은 기술 RFC에서 새로운 변환이 어떻게 작동하는지에 대한 자세한 내용을 확인하실 수 있습니다.

Note. react/jsx-runtime 및 react/jsx-dev-runtime 내부의 함수는 컴파일러 변환에만 사용되어야 합니다. 코드에 요소를 수동으로 만들어야 한다면 React.createElement를 계속 사용해야 합니다. 그것은 계속 작동할 것이고 사라지지 않을 것입니다.

How to Upgrade to the New JSX Transform

새로운 JSX 변환으로 업그레이드할 준비가 되어 있지 않거나 JSX를 다른 라이브러리에 사용하고 있다면 걱정하지 마십시오. 이전 변환은 제거되지 않고 계속 지원됩니다.

새로운 JSX 변환은 Babel v7.9.0 이상에서 지원됩니다. 우선 최신 바벨과 플러그인 변환으로 업데이트해야 합니다.

@babel/plugin-transform-react-jsx를 사용하는 경우:

yarn upgrade @babel/core @babel/plugin-transform-react-jsx

@babel/preset-react를 사용하는 경우:

yarn upgrade @babel/core @babel/preset-reac

이전 버전에서는 {"runtime": "classic"}이(가) 기본 옵션입니다. 새 변환을 사용하려면 {"runtime": "automatic"}을(를) @babel/plugin-transform-react-jsx 또는 @babel/preset-react 옵션으로 전달할 수 있습니다:

// If you are using @babel/preset-react
{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}

// If you're using @babel/plugin-transform-react-jsx
{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "runtime": "automatic"
    }]
  ]
}

바벨 8부터는 두 플러그인 모두 "자동"이 기본 런타임이 됩니다. 자세한 내용은 @babel/plugin-transform-react-jsx 및 @babel/preset-react에 대한 바벨 설명서를 참조하십시오.

마치면서

이번 시간에는 JSX가 무엇이고 왜 생겨났는지 알아봤습니다. 그리고 추가적으로 React 17에서의 New JSX Transform를 살펴보면서 어떻게 업그레이드 되었는지 알아봤습니다.