JSX

React에서 UI 컴포넌트를 보다 쉽게 만들기 위해 사용되는 자바스크립트 + XML 확장 문법이다.

JSX 문법이 쉬운 이유는 프론트엔드 개발자에게 가장 친숙하고 직관적인 마크업 구조로 되어있기 떄문

JSX 문법 그 자체로 자바스크립트 엔진이나 브라우저에서 해석할 수 없기 때문에 Babel과 같은 트랜스파일러를 통해 엔진 또는 브라우저에서 이해할 수 있는 문법 즉 자바스크립트 코드로 다시 변환하는 과정이 필요하다.

JSX는 HTML이 아닌 XML

	XML	HTML
대소문자 구분	O	X
커스텀 태그	O	X
닫는 태그 </> 필요	O	X

• JSX는 HTML element 외 추가적으로 컴포넌트를 태그로 정의하여 사용 가능하다.

• React에서 JSX는 대문자 → 컴포넌트, 소문자 → HTML element로 대소문자를 구분한다.

• JSX는 닫는 태그를 명시해줘야 한다.

JSX는 React에서만 쓰이는걸까?

JSX는 리엑트에서만 사용되는 전유물이 아닌 다른 프레임워크에서도 사용할 수 있는 문법이다.

• Vue.js: 기본적으로 템플릿 기반의 문법을 사용하지만 JSX로도 Vue 컴포넌트를 작성할 수도 있다.

• 그 외 사용되는 프레임워크 preact, ember.js, Hyperapp 등

• 즉, JSX문법은 하나의 특정 코드로만 변환되는 것이 아닌 각 프레임워크 마다 변환되는 코드는 모두 다르다.

JSX는 Syntactic sugar

문법적 설탕(Syntactic sugar) 이란 문법적 기능은 동일한데 그것을 읽는 사람 또는 작성하는 사람이 코드를 보다 직관적이고 읽기 쉽게 디자인 된 문법이다.

JSX는 쉬운 마크업 구조로 작성 되며 특정 기능을 수행하는 코드로 변환 되기 떄문에 동일한 기능을 보다 쉽게 작성할 수 있는 Syntactic sugar이다.

jsx는 Syntactic sugar 이기에 jsx로 할 수 있는 모든 것은 순수 Javascript로도 할 수 있다.

React는 JSX 문법을 React.createElement(tag, props, ...children) 함수로 변환시킨다.

React.createElement

리엑트는 효율적인 렌더링을 위해 실제 돔과 같은 구조인 가상 돔(Virtual DOM)을 사용한다. 이 가상 돔을 간단한 객체 구조로 만들기 위해 리엑트에서 제공하는 헬퍼 함수

DOM API에서 돔 트리를 구성하는 요소를 만드는 document.createElement()와 비슷한 맥락으로 리엑트에서 사용하는 Virtual DOM 트리를 구성하는 요소 React Element를 만드는 함수이다.

React는 JSX 문법을 사용하지 않고도 createElement(tag, props, ...children)만을 사용하여 앱을 만들 수도 있다.

일부 조각이 전체와 비슷한 프랙탈(fractal)구조인데 어찌보면 당연한데, DOM이 Tree 구조이기 때문이다.

DOM API를 사용하는 것보다는 코드량이 줄었으나 여전히 직관적이지 않아 UI구조를 파악하기 힘들다.

const vdom = createElement(
  'p',
  {},
  createElement('h1', {}, 'react awesome'),
  createElement(
    'ul',
    {},
    createElement('li', { style: 'color: red' }, 'first item'),
    createElement('li', { style: 'color: orange' }, 'second item'),
    createElement('li', { style: 'color: green' }, 'third item')
  )
);

jsx를 React.createElement()로 변환

jsx 문법을 통해 내부적으로 React.createElement()가 동작하는 식으로 만들기 위해서는 트랜스파일러의 도움이 필요하다.

가장 대표적으로 쓰이는 Babel의 경우 @babel/plugin-transform-react-jsx가 해당 함수로 변환하는 역할을 한다. 변환되는 코드 확인하기

@babel/preset-react vs @babel/plugin-transform-react-jsx

프리셋(preset): 목적에 맞게 여러가지 플러그인을 묶어 놓은 세트

플러그인(plugin): 코드를 변환하는 역할을 수행

@babel/preset-react → React 앱에서 자바스크립트 코드로 변환할 때 사용되는 플러그인들의 집합

@babel/plugin-transform-react-jsx → jsx 문법을 자바스크립트 코드로 변환하는 역할

사용자 컴포넌트

UI조각을 자바스크립트에서 모듈화 하듯이 조직화할 수 있다.

• 모듈화가 가능하다는 것은 언제든 필요할때 재사용이 가능하다는 얘기

• html 태그와 달리 이름을 붙여 좀 더 의미가 명확한 UI 형태로 만들 수 있는 장점이 있다.

React.createElement() 함수에서 첫번째 인자값으로 대문자가 들어오면 즉, jsx 문법의 태그 이름이 대문자로 시작되면 문자열로 취급하지 않고 자바스크립트 값(함수, 클래스)으로 취급된다.

const Hello = () => <h1>Hello</h1>;
const hello = () => <h1>hello</h1>;
const App = (
  <p>
    <Hello></Hello>
    <hello></hello>
  </p>
);

// @babel/preset-react 변환 후
const Hello = () => React.createElement('h1', null, 'Hello');
const hello = () => React.createElement('h1', null, 'hello');
const App = React.createElement(
  'p',
  null,
  React.createElement(Hello, null), // 대문자는 값으로 취급
  React.createElement('hello', null) // 소문자는 문자열로 취급
);

컴포넌트는 반드시 createElement() 의 결과값 즉, jsx문을 반환해야 한다. 컴포넌트는 createElement(tag, props, ...children) 인자 중 children 인자를 props에 합해서 입력받게 된다.

export function createElement(tag, props, ...children) {
  if (typeof tag === 'function') {
    return tag({
      ...props,
      children: children.length === 1 ? children[0] : children,
    });
  } else {
    return {
      tag,
      props: props ?? {},
      children,
    };
  }
}

React17 new Trasnform jsx

React17 이전에는 jsx 구문을 사용할 때 import React from 'react'를 포함 해야하는 구조적 제약사항이 있었는데 그 이유가 내부적으로 React.createElement() 로 변환이 되면서 React를 참조하고 있기 때문이다. -> React17에서 새롭게 변경된 기능들 중 jsx를 변환하는 방법이 추가되었는데 그로 인해 더 이상 React를 import 선언하지 않고 작업이 가능해졌다. 자세히 살펴보기

const App = () => {
  return (
    <div className='react'>
      <Component title='awesome' />
    </div>
  );
};

// createElement()
const App = () => {
  return React.createElement(
    'div',
    {
      className: 'react',
    },
    React.createElement(Component, {
      title: 'awesome',
    })
  );
};

// react17 new Transform jsx
import { jsx as _jsx } from 'react/jsx-runtime'; // 컴파일러가 자동으로 임포트해준다.
const App = () => {
  return _jsx('div', {
    className: 'react',
    children: _jsx(Component, {
      title: 'awesome',
    }),
  });
};