[Web] 가상돔 (Virtual DOM) 작성해보기 (2) - JSX

이전 게시물과 이어짐

이전 게시물에서 리얼 DOM 트리를 가상돔으로 작성해보는 작업을 해봤었는데, 가상돔은 가독성이 좋지 못하다. 실제로 내가 가상돔을 작성해보면서 가독성 측면에서 보았을 때는 단점이라는 생각이 들었다.

이러한 가상돔의 단점을 해결하기 위해 JSX가 나타나게 되었다.

JSX 정리!

• JSX는 HTML과 굉장히 유사하지만, 실제로 보면 자바스크립트이다. 자바스크립트를 확장한 문법으로, 자바스크립트의 모든 기능을 포함하고 있다. 자바스크립트 코드안에서 UI 작업을 할 때 가독성을 높이는데 더 도움이 된다. + (JSX를 사용하기 위해서는 Babel 관련 패키지를 설치 해야한다.)

가상돔을 JSX를 이용해 수정

• 다음과 같은 가상돔을 작성했을 때,

function h(type, props, ...children) {
  return { type, props , children: children.flat() }
}

h('div', {id: 'app'}, 
  h('h1', null, '회원가입'),
  h('form', {className: 'form'},
    h('input', {type: 'text', placeholder: '아이디를 입력하세요'}),
    h('input', {type: 'password', placeholder: '비밀번호를 입력하세요'}),
    h('button', {type: 'submit'}, '저장')
  ),
  h('div', 
    h('button', {type: 'button', className: 'button'}, '로그인')
);

• JSX를 이용해 다음과 같이 수정할 수 있다.

function h(type, props, ...children) {
	return { type, props , children: children.flat() }
}

function createRealDom(node) { /* 생략 */ }

createElement(
  <div id="app">
    <h1>회원가입</h1>
    <form class="form">
      <input type="text" placeholder="아이디를 입력하세요" />
      <input type="password" placeholder="비밀번호를 입력하세요" />
      <button type="submit">저장</button>
    </form>
    <div>
      <button type="button" class="button">로그인</button>
    </div>
  </div>
);

HTML과 유사한 JSX로 인해 가독성이 좋아졌음을 알 수 있다.