예제 - Todo 앱 만들어보기

mithril 프레임 워크를 사용해서 간단한 Todo 앱을 만들어 보겠습니다.

1. 입력필드와 Add버튼이 있어서, 할일을 입력하고 Add 버튼을 클릭하면 새 할일이 생성됩니다.
2. 할일들은 목록으로 표시되며, 각각의 할일은 체크 박스를 포함합니다.
3. 체크박스에 체크하면 완료한 항목이 되어 취소선이 그어지게 됩니다.

앱을 크게 세 개의 컴포넌트로 구성하고자 합니다.

1. App – 메인 앱 컴포넌트로 할일의 배열과 새 일의 제목이 될 텍스트 값을 가지고 있습니다.
2. Inputs – 입력 필드 부분을 표현합니다.
3. Lists – 할일 목록 부분을 표현합니다.

먼저 개별 작업을 표현할 클래스를 정의합니다. 제목과 완료 여부 정도만 있으면 됩니다.

class Task {
  constructor(title) {
    this.title = title
    this.done = false
  }
}

다음은 앱입니다. 실질적인 UI는 다른 컴포넌트에 의해 생성되며, 데이터를 저장하는 프로퍼티와 새 작업을 추가하는 메소드를 작성합니다.

var App = {
  todos: [],
  text: '',
  view: function() {
    return [
      m(Inputs, this), m(Lists, this)
    ]
  },
  add: function() {
    let t = this.text.trim()
    if(t.length > 0) {
      this.todos.push(new Task(t))
    }
    this.text = ''
  }
}

입력 부분입니다. view() 메소드의 인자인 vnode에 대해 vnode.attrs는 App 객체를 가리키고 있습니다. 입력 필드가 변경되면 App.text가 변경되고, 버튼을 클릭하면 App.add() 가 호출되도록 합니다.

var Inputs = {
  view: function(vnode) {
    return [
      m('input', {
        value: vnode.attrs.text,
        onkeyup: (e) => vnode.attrs.text = e.target.value
      }),
      m('button', {
        onclick: () => vnode.attrs.add()
      }, 'Add')
    ]
  }
}

이번에는 리스트입니다. ul 요소 아래에서 App.todos 각 항목으로 li 요소를 만들어 줍니다. 각 item에 대해서 체크박스가 변경될 때마다 item.done 값을 변경해줍니다.

var Lists = {
  view: function(vnode) {
    return m('ul', vnode.attrs.todos.map(item => {
      return m('li', [
        m('input[type=checkbox]', {
          onchange: (e) => item.done = e.target.checked
        }),
        m('span', {style:{
          'text-decoration': item.done ? 'line-through' : 'none'
        }}, item.title)
      ])
    }))
  }
}

이상으로 세 개의 컴포넌트로 Todo 앱의 기본 기능을 구현해봤습니다. 컴포넌트로 쪼개면 view 메소드 작성 부분이 그나마 조금 간단해집니다. 아래 코드는 똑같은 기능을 LiveScript로 구현해본 것입니다. 확실히 view 부분이 깔끔하게 만들어지는 것을 볼 수 있습니다.

class Task
  (@title) ->
    @done = false

Inputs = do
  view: (vnode) ->
    * m \input do
        value: vnode.attrs.text
        onchange: (e)!-> vnode.attrs.text = e.target.value
      m \button do
        onclick: !-> vnode.attrs.add!
      , \Add

Lists = do
  view: (vnode) ->
    m \ul, vnode.attrs.todos.map (item) ->
      m \li,
      * m 'input[type=checkbox]' do
          value: item.title
          onchange: (e) !-> item.done = e.target.checked
        m \span do
          style: {'text-decoration': if item.done then 'line-through' else 'none'}
        , item.title

App = do
  text: ''
  todos: []
  view: ->
    * m Inputs, this
      m Lists, this
  add: !->
    t = @text.trim!
    if t.length > 0 then
      @todos.push (new Task t)
    @text = ''



m.mount document.body, App