[Node] React 정리(2) - HTM 사용하여 render 하기

리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이 문서는 어떠한 리액트의 이론을 다루는 것이 아닙니다. 또한 현재 정리하려는 것은 여러분이 필요한 JSX 부분이 아닐 수 있음을 알려드립니다.

 

 본 과정에서는 차례대로 난이도가 증가하는 정리를 하지 않았습니다. 필요한 부분만을 사용하거나 훑어보는 용도로 사용하시기 바랍니다.

 

 

# Contents

---

• HTM 라이브러리를 사용
• 리액트 돔에 렌더 방법

 

 

# HTM 라이브러리 사용

---

 표준 JavaScript 태그 템플릿 리터럴을 사용하는 것은 읽고 쓰기가 매우 쉽고 중간 컴파일 프로세스를 수행할 필요가 없는 코드에서 좋은 절충안이 됩니다. 이러한 기능을 제공하는 라이브러리는 HTM 라이브러리와 ESX 라이브러리 JSX 라이브러리 등이 있는데, 저는 HTM 라이브러리를 사용하여 리액트를 사용할 예정입니다.

 

 가장 기초적인 애플리케이션의 진입점 index.js 모듈에서 작성하는 것으로 시작할텐데 이것의 사용 방법은 아래와 같습니다.

 

 index.js

 

import reactDom from "react-dom";
import react from 'react'
import htm from 'htm'

var html = htm.bind(react.createElement);

 

 

# HTM 라이브러리 사용

---

 사용한 htm 라이브러리를 통하여 reactDom에 렌더하는 방법은 아래와 같습니다.

 

 index.js

 

import reactDom from "react-dom";
import react from "react";
import htm from "htm";

var html = htm.bind(react.createElement);

reactDom.render(html`<h2>hello world</h2>`, document.getElementById("root"));