태그
Riot의 Tag는 UI를 만드는 기본 요소이다. 좀 더 확장된 Todo태그를 보자.
이 예제는 이곳에서 실행결과를 확인해 볼 수 있다. Riot태그 컴포넌트는 마크업과 자바스크립트 로직의 조합이다. 심지어, <script>태그를 생략할 수도 있다. Expression내에 따옴표도 생략가능 하다. <foo bar={ baz }>는 <foo bar=”{ baz }”>과 같다.
ES6 화살표 함수처럼 methodName() { } 는 this.methidName = function() {}.bind(this) 와 같이 실행시에 변환되어 해석된다. 그러므로, this는 항상 현재 태그의 인스턴스를 가리킨다.
마운트
태그가 생성되면 페이지에서 다음과 같이 마운트를 할 수 있다.
이때, <todo/>와 같이 self-closing태그는 지원되지 않는다.
Riot에서 DOM에 접근하려면 Riot Tag의 Life Cycle에 대해 약간 알아 둘 필요가 있다.
첫번째는 실패이고, 나머지는 성공이다. 2번과 3번의 차이는 태그가 업데이트될때마다 실행되느냐 최초 마운트시에 한번만 실행되느냐의 차이이다. 이 외에도, 몇가지 이벤트들이 더 존재한다.
- before-mound: 마운트 되기전 한번
- mount: 마운트 된후 한번
- update: 업데이트 되기전 매번
- updated: 업데이트 된후 매번
- before-unmount: 삭제되기전 한번
- unmount : 삭제 된후 한번
- * : 모든 이벤트
마운트할때 두번째 인자에 데이터를 넘겨줄 수 있다.
|
|
간단한 자바스크립트 객체에서 Flux Store까지 무엇이든 넘겨줄 수 있다.
|
|
이렇게 넘겨받은 데이터는 스크립트내부에서나 HTML에서 opts객체로 사용할 수 있다. <script>…</script> 태그는 생략해도 된다.