왜 Riot인가?

Riot은 매우 작은 라이브러리이다. 이것이, 왜 Riot인지에 대한 답이다. 작다는것은 습득해야 할것도 적고, 버그도 적다는것으로 해석될 수 있다.

Riot은 사실 React에 많은 영향을 받아, React의 Light 버전 처럼 느껴진다. 또한, Polymer의 장점도 반영되었다. 전반적인 코드는 마치 “Javascript vs. Coffescript”를 보는것 처럼 간결하다.

바로 코디를 통해 Riot에 대해 살펴보겠다.

커스텀 태크

모든 브라우저에서 Polymer처럼 커스텀 태그를 쓸 수 있다. 하지만, 컴포넌트의 생김새는 React와 유사하다.

<todo>
    <!-- Markup -->
    <h3>{ opts.title }</h3>
    <ul>
        <li each={ item in items }>{ item }</li>
    </ul>
    <form onsubmit={ add }>
        <input>
        <button>Add #{ items.length + 1 }</button>
    </form>
    <!-- Style -->
    <style>
        h3 {
            font-size: 14px;
        }
    </style>
    <!-- Logic -->
    <script>
        this.items = []
        add(e) {
            var input = e.target[0]
            this.items.push(input.value)
            input.value = ''
        }
    </script>
</todo>

별다른 해석이 없어도 위 컴포넌트의 기능을 이해하는데 별 어려움은 없을 것으로 보인다. 이 태그는 페이지에서 아래와 같이 사용될 수 있다.

1
2
3

<todo></todo>
<script>riot.mount('todo')</script>

React를 보신분들은 비슷한점을 많이 느낄것이다. 하지만, Riot은 훨씬 간결한 문법을 제공하고 es6와도 잘 맞는다. 비슷하지만 뭔가 다른다. riotjs 홈페이지의 React와의 비교 페이지에 따르면 이것은 겉모습뿐만이 아니다.

Riot은 DOM파싱시에 모든 DOM Node의 Expression을 배열로 참조하고 있다가 변화가 생기는 노드에 대해서만 업데이트를 한다. 그런데, React와 달리 Riot은 HTML구조는 고정된다. 즉, div가 label로 변경될 수 없다. Riot은 단지, 참조하고 있는 Expression만 업데이트 하고, 그 하위 노드에 대한 복잡한 교체는 하지 않음으로써 DOM업데이트를 매우 빠르게 처리할 수 있다.

결론

Riot은 크게 Custom Tag, Event Observer, Router의 세가지를 기본적인 구성요소로 가지고 있다. 그리고, minimal한 기능을 제공함으로써 혼란을 줄이고 빠르게 개발에 집중할 수 있도록 한다.