Riot 프레임워크 알아보기. (6/6) Router

작성일   |   In   |  

frame

기본

Riot은 라우팅 기능을 포함하고 있다. 우선 간단한 예제를 살펴보자.
먼저 index.html 은 아래와 같다.

1
2
3
4
5
6
<html>
    <body>
        <navigation></navigation>
        <div id="main"></div>
    </body>
</html>

다음은 app.js 이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import 'navigation.tag'
import 'home.tag'
import 'about.tag'
import 'contact.tag'
// mount navigation tag
riot.mount('navigation')
riot.route(function(action) {
    switch (action) {
        case 'about':
            return riot.mount('#main', 'about')
            break
        case 'contact':
            return riot.mount('#main', 'contact')
            break
        default:
            riot.mount('#main', 'home')
    }
})
rout.route.start(true)

<navigation></navigation> 태그는 ‘/home’, ‘/about’, ‘/contact’ 링크를 포함하고 있다고 가정. 각, 링크를 클릭하여 메뉴를 이동하면 브라우저 주소창의 URL이 변경될것이다.

기본 URL파서는 path부분을 콜백함수의 인자로 받는다. ‘/home’의 경우 ‘action’은 ‘home’이 된다.
만일, route를 아래와 같이 정의하고 ‘/users/1234/edit’ 와 같이 URL을 호출한다면 어떻게 될까?

1
2
3
riot.route(function(collection, id, action) {
    ...
})

collection : users
id : 1234
action : edit

와 같이 인자를 받게 된다. 유의할 점은 riot router는 자동으로 실행되지 않기 때문에 반드시 riot.route.start()를 해줘야만 작동한다.(v2.3이후) 이것은, riot과 함께 다른 router도 사용할 수 있음을 의미한다.

필터

다른 라우터들 처럼 URL의 앞부분 또는 일부를 고정된 형태로 필터링 할 수 있다. 다음과 같이 정의할 경우 항상 ‘/fruit’에 매칭된다.

1
2
3
roit.route('/fruit', function() {
    ...
})

와일드카드(*)또한 지원되므로 다음과 같이 정의할수 있다.

1
2
3
riot.route('/fruit/*', function(name) {
    ...
})

/fruit/apple 을 호출할 경우 name = apple 이 된다.

활용

이것은 Riot Router의 기본 URL파서의 행동으로서 URL파서를 커스터마이징 하여 다르게 작동할 수도 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
riot.route.parser(function(path) {
  var raw = path.slice(2).split('?'),
      uri = raw[0].split('/'),
      qs = raw[1],
      params = {}
  if (qs) {
    qs.split('&').forEach(function(v) {
      var c = v.split('=')
      params[c[0]] = c[1]
    })
  }
  uri.push(params)
  return uri
})

/users/edit?id=1234를 호출할 경우

1
2
3
4
5
riot.route(function(target, action, params) {
    // target = users
    // action = edit
    // params = { id: '1234' }
})

추가적인 API 사용법은 Route API에서 자세히 볼 수 있다.