JSX 없이 사용하는 React

JSX가 무엇인지는 앞서 다뤄서 넘어가겠다. 

JSX란?

---

React로 개발을 하다보면 JSX 형식으로 코드를 작성하게 된다. 

하지만 브라우저는 JSX 형식을 인지하지 못하기 때문에 뒷단에서 변환하는 과정을 거친다고 했다. 

덕분에 우리는 가독성 높고 간편한 JSX 형식으로 선언형 프로그래밍을 할 수 있게 되었다.

그러나, React를 사용할 때 무조건 JSX를 써야하는 것은 아니다.

앞에서도 언급했듯이 브라우저가 이해할 수 있는 언어로 작성하면 JSX로 작성한 것처럼 같은 효과를 낼 수 있다. 

---

우선 그 전에 package.json에서 할당되어 있는 react는 왜 사용하지 않는지 먼저 살펴보자. 

이것은 최신 react 프로젝트 셋업에서 작동하는 것으로, 오래된 버전의 react 프로젝트의 경우 react를 import하는 것을 볼 수 있다.

import React from 'react';

반드시 해당 구문이 필요했었는데, 이제는 생략할 수 있게 되었다. 

---

아래 코드들은 같은 것을 표현한 코드이다. 

// JSX로 구현
  return (
    <div>
      <h2>Let's get started!</h2>
      <Expenses items={expenses}/>
    </div>
  );

// JSX 없이 구현
  return React.createElement(
    'div', 
    {}, 
    React.createElement('h2', {}, "Let's get started!"),
    React.createElement(Expenses, {items:expenses})
  );

지금은 JSX로 구현할 때 쓰이는 저런 요소들이 실제로는 이렇게 작동한다는 것이다. 

물론 가독성은 떨어지겠지만, React.createElement()는 아래의 문법에 맞게 사용된다.

React.createElement(
  type, // 생성하는 요소 | 태그 이름 문자열 | 리액트 컴포넌트
  [props], // 태그에 들어가는 속성 객체 | {attribute: value}
  [ ... children] // 자식으로 넣어주는 요소들 | 여러개 있다면 무한정 사용 가능
);

---

결국, JSX 방식의 코드가 더 편리하다.

하지만 그 안에서 어떤 일이 벌어지고 있는지, react가 어떻게 작동하는지 이해하는 것은 중요하다.