Riot 프레임워크 알아보기. (4/6) 이벤트 처리와 반복문

작성일   |   In   |  

이벤트 핸들러

DOM 이벤트에 대한 처리를 하는 함수를 이벤트 핸들러라고 부른다. Riot에서 일반적인 이벤트 핸들러는 다음과 같은 형식으로 처리한다.

1
2
3
4
5
6
7
8
9
10
<login>
  <form onsubmit={ submit }>
  </form>
  // this method is called when above form is submitted
  submit(e) {
  }
</login>

“on…”으로 시작하는 DOM Event는 모두 동일한 방법으로 적용할 수 있으며 다음과 같이 표현식(expression)을 사용해 이벤트 핸들러를 동적으로 적용할 수도 있다.

1
<form onsubmit={ condition ? method_a : method_b }>

주의할 점은 Riot의 이벤트 핸들러 “e.preventDefault()”을 호출하여 브라우저의 기본 이벤트 전파를 막는것이다. 이것을 허용하려면, 핸들러 함수의 마지막에 true를 리턴하면 된다.

1
2
3
submit(e) {
    return true
}

조건문

조건문은 조건에 따라 특정 DOM노드를 보여주거나 숨기는 기능을 제공한다.

1
2
3
<div if={ is_premium }>
  <p>This is for premium users only</p>
</div>

  • show : 판단값이 true이면 DOM을 보여준다.
  • hide : 판단값이 true이면 DOM을 못본다.
  • if : 판단값이 true이면 DOM추가, 아니면 제거.

반복문

loop

반복문은 each 속성과 함께 아래와 같이 사용할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<todo>
  <ul>
    <li each={ items } class={ completed: done }>
      <input type="checkbox" checked={ done }> { title }
    </li>
  </ul>
  this.items = [
    { title: 'First item', done: true },
    { title: 'Second item' },
    { title: 'Third item' }
  ]
</todo>

컨텍스트(Context)

Riot에서 반복문을 사용할때 몇가지 주의할 점이 있다. 가장 중요한것은 각 each 아이템마다 자식 컨텍스트가 생성된다는 것이다.

1
2
3
4
5
6
7
8
9
10
11
12
<todo>
  <div each={ items }>
    <h3>{ title }</h3>
    <a onclick={ parent.remove }>Remove</a>
  </div>
  this.items = [ { title: 'First' }, { title: 'Second' } ]
  remove(event) {
  }
</todo>

each반복문 내부의 this는 새로운 컨텍스트 이다. 즉, items각 요소가 this이자 todo의 자식 컨텍스트로 생성되었으므로, title에는 직접 접근할 수 있지만 todo태그 인스턴스의 함수는 “parent.” 접두사를 붙여서 호출할 수 있다.

반복문내에서의 이벤트 핸들러

위의 remove함수는 이벤트 객체를 통해 각각의 자식 요소들에 접근할 수 있다. event.item를 통해 items의 개별 요소를 참조할 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<todo>
  <div each={ items }>
    <h3>{ title }</h3>
    <a onclick={ parent.remove }>Remove</a>
  </div>
  this.items = [ { title: 'First' }, { title: 'Second' } ]
  remove(event) {
    // looped item
    var item = event.item
    // index on the collection
    var index = this.items.indexOf(item)
    // remove from collection
    this.items.splice(index, 1)
  }
</todo>

이벤트핸들러가 실행되고 난 후에는 현재 태그 인스턴스가 this.update()를 이용해 화면을 갱신하게 되고, 이것은 반복문내의 자식 인스턴스들로 모두 갱신한다.

서버사이드 렌더링

서버측에서 npm으로 riot을 설치한 다음 원하는 태그를 require하고 “riot.render(*.tag)”를 호출하기만 하면 된다.

1
2
3
4
5
6
var riot = require('riot')
var timer = require('timer.tag')
var html = riot.render(timer, { start: 42 })
console.log(html) // <timer><p>Seconds Elapsed: 42</p></timer>

이곳에서 express+swig+riot을 사용한 간단한 Server-Side rendering 예제를 볼 수 있다.