나만의 리액트 만들어보기 - 2 (JSX 셋팅)

리액트는 JSX라는 문법을 사용합니다.

하지만 자바스크립트는 해당 문법을 모릅니다!

 

"저는 리액트 쓰는데 jsx써도 잘만 되던데요?"

맞다.

왜냐하면 바벨에서 jsx문법을 읽을 수 있기 때문이다.

실제 바벨로 번역해보자

 

a를 보면 jsx문법인데 우측에서 React.createElement로 자동 변환되어 적용된것을 볼 수 있다.

우리는 React라고 말해주지도 않았는데, JSX문법을 보고 바로 React.createElement로 바꿔버린 것이다!

 

하지만 우리는 JSX 문법을 쓰고 React는 우리가 만들어 나갈 것이기 때문에 별도의 셋팅이 필요하다.

 

위 코드에는 생략되어 있지만 위 코드는 아래와 같다.

 

파일의 최상단에 주석으로, jsx문법에 사용할 함수를 우리가 직접 정할 수 있다.

기본값으로 React.createElement일 뿐이다.

 

그러면 JSX문법을 만나면 dobyReact.createElement로 바꾸고 싶다.

아래와 같이 하면 된다.

오 이제, JSX문법을 만나면 모두 dobyReact로 바뀐다!

 

 

위 방식을 우리 코드에 적용시키자.

// index.js

const TinyReact = (() => {
  const createElement = (...args) => {
    console.log(args);
  };

  return {
    createElement,
  };
})();

 

// dom.js

/** @jsx TinyReact.createElement */

const root = document.querySelector("#root");

const example = (
  <div className="test">
    <span>
      <p id="test2"></p>
    </span>
  </div>
);

 

이제 TinyReact라는 객체에 있는 createElement를 JSX에 사용할 수 있다.

 

실제로 페이지에 콘솔을 보면 다음과 같이 출력된다.

여기서 우리는 다음과 같은 사실을 알 수 있다.

 

1. 가장 안쪽의 자식부터 출력된다.

2. tagType, 속성, undefined 형식으로 출력되고 있다.

 

첫번째, 두번째 인자는 그렇다 쳐도 3번째인자는 계속 비어있다. 

사실 3번째 인자 부분은 태그 하위의 children이다. (알아만 두자.)

 

 

커밋: github.com/zereight/Tiny-React/commit/95bbbd580a1c2cbb33c8e1d587bf1f462db641c8