[Epic React] Dom Api로 비동기 렌더링

Get Really Good at React | Epic React by Kent C. Dodds

https://epicreact.dev/learn/

해당 클래스를 내돈내산으로 공부하며 작성하는 짤막글이다.

 

바닐라 자바스크립트의 dom api를 사용해서 functional하게 dom을 조작해 보려니 뭔가 생각했던 대로 동작하지 않는다.

그래서 심심해서 dom을 비동기적으로 조작하는 짤막한 코드를 작성해 보았다.

      root()
        .then($root => document.body.append($root) || $root)
        .then($root => Promise.all([$root, div()]))
        .then(([r, d]) => r.append(d))
      async function div() {
        const $div = document.createElement('div')
        $div.textContent = 'Hello World'
        $div.className = 'container'
        return $div
      }
      async function root() {
        const $root = document.createElement('div')
        $root.id = 'root'
        return $root
      }

동기적으로 수행되어야 하는 unit of works를 promise 체인으로 각각 나누어주니 생각했던 대로 동작한다.

대충 읽어보면 리액트랑 어떤 연관이 있는지 알 수 있을 것이다.