JSX와 React.createElement(), React Element

📚 React 엘리먼트
📚 React.createElement()
📚 JSX
📌 React에서 JSX 사용
Reference

- 23/08/31 스터디 면접 질문!

🙋 리액트에서 JSX 문법이 어떻게 사용되나요?

📚 React 엘리먼트

React 앱의 화면을 표시하는 가장 작은 구성 요소.
React 엘리먼트는 React 컴포넌트의 반환 값으로일반 객체(plain object)이다.
엘리먼트가 모여 컴포넌트라는 구조를 갖는다.
React 엘리먼트는 실제 DOM에 직접 렌더링되지 않음

📚 React.createElement()

React 엘리먼트를 생성하는 역할.
가상 DOM에 리액트 엘리먼트가 생성되고, 실제 DOM으로 렌더링됨.

📚 JSX

JSX는 리액트에서 사용되는 JavaScript 확장문법으로, UI를 구성하는 데 사용된다.
JSX를 사용하면 HTML과 유사한 마크업을 사용하여 UI 요소를 정의할 수 있다.
JSX 엘리먼트는 사실상 React.createElement()를 호출하는 편리한 문법에 불과함.

📌 React에서 JSX 사용

JSX를 브라우저에서 직접 실행할 수 없기 때문에 Babel과 같은 트랜스파일러를 사용해서 표준 JavaScript로 변환해야 한다.

Babel은 React.createElement() 호출로 변환하는 작업을 처리하고, 이렇게 변환된 코드는 브라우저에서 실행 가능한 형태가 된다.

즉, JSX는 컴파일러에 의해 React.createElement() 함수 호출로 변환하여 React Element를 반환한다.

JSX가 컴파일되는 예제

JSX가 어떤식으로 JavaScript 함수 호출React.createElement()로 변환될까?


    
    
    
import React from 'react'

function App (){
  return (
    <div>
      <p>This is a list</p>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
      </ul>
    </div>
  );
};

위의 예제가 브라우저에 사용되기 전에 다음 예제로 컴파일됨.


    
    
    
import React from 'react'

function App() {
  return React.createElement(
    "div",
    null,
    React.createElement("p", null, "This is a list"),
    React.createElement(
      "ul",
      null,
      React.createElement("li", null, "List item 1"),
      React.createElement("li", null, "List item 2")
    )
  );
}

이 방식은 JSX 없이 리액트를 작성하는 방법이기도 함.

React.createElement()으로 엘리먼트를 생성하는 것은 보다싶이 가독성과 유지보수성이 좋지 않음.

그래서 HTML과 JavaScript의 힘을 결합한 JSX가 등장하게 된 것!

JSX를 사용할 경우 React.createElement()를 직접 호출하는 일은 거의 없다.

✍️ JSX의 반환값

JSX는 결국 React 엘리먼트를 반환하기 때문에 객체형태로 반환된다.
// 위 예제의 반환값


    
    
    
{
    "type": "div",
    "key": null,
    "ref": null,
    "props": {
      "children": [
        {
          "type": "p",
          "key": null,
          "ref": null,
          "props": {
            "children": "This is a list"
          },
          "_owner": null
        },
        {
          "type": "ul",
          "key": null,
          "ref": null,
          "props": {
            "children": [
              {
                "type": "li",
                "props": {
                  "children": "List item 1"
                },
                // 중략
              },
              {
                "type": "li",
                "props": {
                  "children": "List item 2"
                },
                // 중략
              }
            ]
          },
          "_owner": null

이것이 JSX 태그를 하나로 감싸줘야하는 이유인 것!

📌 여러 JSX태그를 하나로 감싸줘야 하는 이유

JSX는 내부적으로 JavaScript 객체로 변환됩니다. (React 엘리먼트로)
하나의 배열로 감싸지 않은 하나의 함수에서는 두 개의 객체를 반환할 수 없습니다.
JavaScript로 바뀌고 JSX로 작성된 attribute는 JavaScript 객체의 키가 됩니다.
👉 JSX에서 attribute가 camelCase로 작성되는 이유

사실 JSX에 대해선 깊게 생각해본 적 없었는데 덕분에 깊게 파볼 수 있어서 뿌듯하다 😄

그리고 createElement()가 type,[props],[...children]를 매개변수로 받는다는데, 리액트 컴포넌트를 내려줄 때 왜 props랑 children이 사용되는지 연결할 수 있을 것 같음! 이 부분은 추가적으로 공부를 더 해봐야겠음.