Note JSX 외에 코드를 줄일 수 있는 방법

사실 JSX 외에도 React.createElement() 호출 대신 사용할 수 있는 방법이 있다. 그중 하나는 React.DOM.*를 사용하는 것이다. 예를 들어 React.createElement()로 <h1> 엘리먼트를 생성한다면 다음과 같다.

React.createElement('h1', null, 'Hey')

다음 코드는 위의 코드와 결과가 같으나 작성하는 시간을 줄일 수 있다.

React.DOM.h1(null, 'Hey')

React.DOM 객체에는 표준 HTML 요소에 대한 엘리먼트가 준비되어 있다. 다음처럼 객체에 어떤 요소가 있는지 확인해볼 수도 있다.

console.log(React.DOM)

React.DOM을 개발자 도구의 콘솔에 직접 입력해도 된다(참고로 React.DOM과 ReactDOM은 전혀 다른 객체이므로 혼동하거나 바꾸어 사용하지 않기를 바란다).

공식 문서에서 추천하는 다른 방법은 JSX를 사용할 수 없는 경우에 짧은 변수를 사용하는 것이다(빌드 과정을 거칠 수 없는 경우를 예로 들 수 있다). 다음 예제처럼 변수 E를 생성할 수 있다.

const E = React.createElement
E('h1', null, 'Hey')