const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement(
  type,
  [props],
  [...children]
)

1. JSX의 html 태그 와 같아 보이는 것은 엘리먼트 라고 하며, javascript 상에서 plain object로 취급 된다.
1. React.createElement() 는 버그가 없는 코드를 작성하는데 도움이 되도록 몇가지 검사를 수행하며, 다음과 같은 객체를 생성한다.

// 주의: 다음 구조는 단순화되었습니다.
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

2. javascript 표현식을 포함 할 수 있다. JSX 자체도 표현식으로 취급된다.

3. React DOM 은 HTML 어트리뷰트를 직접 사용하지 못하고, camelCase로 프로퍼티를 이름 짓는다. 예를 들어 JSX 에서는 class 가 className 이 되고, tabindex는tabIndex 가 된다.

4. HTML 태그 처럼 자식을 포함할 수 있고, 태그가 비어있다면, /> 를 이용해 바로 닫아주어야 한다.

5. JSX는 주입 공격을 방지한다.
1. React DOM 은 JSX 에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하기 때문에, 애플리케이션 단에서 명시적으로 작성되지 않은 내용은 중입되지 않는다. 그래서 XSS 공격을 방지할 수 있다.

<MyComponent />

1. React가 스코프 내에 존재해야 한다.
1. React.createElement() 를 사용하기 때문에, React 를 import 해야 한다.

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

function WarningButton() {
  // return React.createElement(CustomButton, {color: 'red'}, null);
  return <CustomButton color="red" />;
}

코드 상에서 실제로 React 는 사용되지 않지만, 주석문에서 나와있는 것과 같이 컴파일 되기 때문에 React 가 import 되어야 한다.

2. JSX 타입을 위한 점표기법 사용
1. JSX 내에서도 점 표기법을 사용하여 React 컴포넌트를 참조 할 수 있다.

import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

3. 사용자 정의 컴포넌트는 반드시 대문자로 시작해야한다.
1. 엘리먼트가 소문자로 시작하는 경우에는 <div> 나 <span> 같은 내장 컴포넌트 라는 것을 뜻하며, 컴파일 될 때 ‘div’ 나‘span’ 같은 문자열 형태로 React.createElement 에 전달된다. <Foo/> 와 같이 대문자로 시작하는 경우에는 React.createElement(Foo) 의 형태로 컴파일 되며 javascript 파일 내에 사용자가 정의했거나 import 한 컴포넌트를 가리킨다.
2. 즉, 컴파일 될 때, 소문자로 시작하는 경우와 대문자로 시작하는 경우 처리가 다르기 때문에 반드시 대문자로 시작해야 한다.

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // 잘못된 사용법입니다! JSX 타입은 표현식으로 사용할 수 없습니다.
  return <components[props.storyType] story={props.story} />;
}

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // 올바른 사용법입니다! 대문자로 시작하는 변수는 JSX 타입으로 사용할 수 있습니다.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

1. javascript 표현식을 props 에서 사용할 수 있다.

2. 문자열 리터럴
1. 문자열 리터럴을 prop 으로 넘겨줄 수 있다.

//두 표현은 동일한 표현
<MyComponent message="hello world" />

<MyComponent message={'hello world'} />

문자열 리터럴을 넘겨줄 때, 그 값은 HTML 이스케이프 처리가 되지 않는다.

//두 표현은 동일한 표현
<MyComponent message="&lt;3" />

<MyComponent message={'<3'} />

3. props 의 기본값은 true
1. prop에 어떤 값도 넘기지 않을 경우, 기본 값은 true로 들어간다.

4. props 에 spread 연산자로 객체 전체를 넘길 수 있다.

//두 표현은 동일한 표현
function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

1. 문자열 리터럴
1. 다음과 같은 문자열이 태그 사이에 있다면 props.children 에는 “Hello world!” 라는 문자열이 들어가게 된다. HTML 은 이스케이프 처리가 되지 않는다.

<MyComponent>Hello world!</MyComponent>

2. JSX
1. JSX 엘리먼트를 자식으로 넘겨줄 수 있다. 엘리먼트들로 이루어진 배열도 가능하다.

render() {
  // 리스트 아이템들을 추가적인 엘리먼트로 둘러쌀 필요 없습니다!
  return [
    // key 지정을 잊지 마세요 :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

3. javascript 표현식

4. 함수
1. 함수 또한 자식으로 활용 할 수 있다.

// 자식 콜백인 numTimes를 호출하여 반복되는 컴포넌트를 생성합니다.
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

5. boolean, null, undefined
1. 유효한 표현이지만 렌더가 되지 않을 뿐이다.

//아래의 JSX 표현식들은 동일하게 렌더링됩니다.

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

해당 타입을 화면에 출력하고 싶다면 문자열로 전환해야 한다.

<div>
  My JavaScript variable is {String(myVariable)}.
</div>

 

• React 를 import 하지 않아도 JSX 를 사용 할 수 있다.

• setup에 따라서, 컴파일된 결과가 번들 사이즈를 살짝 개선 시켜 줄 수 있다.

• React 에 대한 당신이 배워야할 컨셉들을 줄여줄 것이다.

JSX 소개 - React

아래 변수 선언을 살펴봅시다. 위에 희한한 태그 문법은 문자열도, HTML도 아닙니다. JSX라 하며 JavaScript를 확장한 문법입니다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장합니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다. JSX는 React "엘리먼트(element)" 를 생성합니다. 다음 섹션 에서는 DOM에 어떻게 렌더링하는지 알아보겠습니다.

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

JSX 이해하기 - React

근본적으로, JSX는 React.createElement(component, props, ...children) 함수에 대한 문법적 설탕을 제공할 뿐입니다. 위의 코드는 아래와 같이 컴파일됩니다. 자식 컴포넌트가 없다면 아래와 같이 자기 자신을 닫는 형태의 태그를 쓸 수 있습니다. 위의 코드는 아래와 같이 컴파일 됩니다. 특정 JSX가 어떻게 JavaScript로 변환되는지 시험해보고 싶다면 온라인 babel 컴파일러 를 사용해보세요.

https://ko.reactjs.org/docs/jsx-in-depth.html

Introducing the New JSX Transform - React Blog

Although React 17 doesn't contain new features, it will provide support for a new version of the JSX transform. In this post, we will describe what it is and how to try it. What's a JSX Transform?

https://ko.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html