Riot.js는 가상 DOM을 지원하며 보일러플레이트가 거의 없는 가볍고 우아한 컴포넌트 기반 UI 라이브러리입니다.
컴포넌트 정의 (my-component.riot)
<user-card>
<div class="card">
<h3>{ state.name }</h3>
<p>Role: { props.role }</p>
<button onclick="{ handleIncrement }">Likes: { state.likes }</button>
</div>
<script>
export default {
onBeforeMount(props, state) {
this.state = {
name: props.initialName || 'Anonymous',
likes: 0
};
},
handleIncrement() {
this.update({
likes: this.state.likes + 1
});
}
}
</script>
</user-card>
생명주기 이벤트
| 메서드 | 실행 시점 |
|---|---|
onBeforeMount(props, state) |
컴포넌트가 DOM에 마운트되기 전 |
onMounted(props, state) |
컴포넌트가 DOM에 부착된 후 |
onBeforeUpdate(props, state) |
상태 업데이트로 인한 재렌더링 전 |
onUpdated(props, state) |
컴포넌트 DOM 업데이트 완료 후 |
onBeforeUnmount(props, state) |
컴포넌트가 파괴되기 직전 |
onUnmounted(props, state) |
컴포넌트가 DOM에서 제거된 후 |
반복문 & 조건문
<!-- 조건문 -->
<p if="{ state.isLoggedIn }">다시 오신 것을 환영합니다!</p>
<button if="{ !state.isLoggedIn }">로그인</button>
<!-- 반복문 -->
<ul>
<li each="{ item in state.items }">
{ item.title }
</li>
</ul>