[javascript] Riot.js를 사용한 웹 컴포넌트 개발 패턴

04 Dec 2023

javascript

Riot.js은 가볍고 유연한 웹 컴포넌트 개발 프레임워크입니다. 이 글에서는 Riot.js를 사용하여 웹 컴포넌트를 개발하는 패턴을 소개하고자 합니다.

1. Riot.js 소개

Riot.js는 사용하기 쉬운 웹 컴포넌트 개발 프레임워크로서, 뷰와 로직을 분리할 수 있습니다. HTML, CSS, JavaScript를 사용하여 컴포넌트를 작성할 수 있으며, 데이터 바인딩, 이벤트 처리, 컴포넌트 통신 등 다양한 기능을 제공합니다.

2. Riot.js 컴포넌트 작성 방법

Riot.js에서 컴포넌트를 작성하기 위해서는 다음과 같은 단계를 따릅니다.

2.1. HTML 템플릿 작성하기

Riot.js 컴포넌트는 HTML 템플릿으로 작성됩니다. 템플릿 내부에는 데이터 바인딩을 위해 {}를 사용할 수 있고, 이벤트 처리를 위해 @를 사용할 수 있습니다.

<my-component>
  <h1>{ title }</h1>
  <button @click={ handleClick }>Click me!</button>
</my-component>

2.2. JavaScript 로직 작성하기

Riot.js 컴포넌트의 로직은 JavaScript로 작성됩니다. riot.observable()을 사용하여 컴포넌트 객체를 생성하고, this를 통해 컴포넌트 내부의 데이터와 메서드에 접근할 수 있습니다.

riot.observable()
  
  .on('mount', function() {
    // 컴포넌트가 마운트되면 실행되는 로직
  })

  .on('update', function() {
    // 컴포넌트가 업데이트되면 실행되는 로직
  })

  .on('unmount', function() {
    // 컴포넌트가 언마운트되면 실행되는 로직
  })

  .methods({
    handleClick: function() {
      // 버튼 클릭 이벤트 처리 로직
    }
  });

2.3. CSS 스타일 작성하기

Riot.js 컴포넌트의 스타일은 CSS로 작성됩니다. 컴포넌트 내부의 스타일은 해당 컴포넌트에만 적용되므로, 스타일 이름 충돌을 걱정할 필요가 없습니다.

my-component {
  display: block;
  margin: 10px;
  padding: 10px;
  background-color: #eee;
}

3. Riot.js 컴포넌트 사용하기

Riot.js 컴포넌트를 사용하기 위해서는 다음과 같이 <script> 태그를 통해 Riot.js와 해당 컴포넌트를 로드한 뒤, 원하는 위치에 컴포넌트를 추가하면 됩니다.

<script src="https://cdn.jsdelivr.net/npm/riot/3.15.1/riot+compiler.min.js"></script>
<script src="my-component.js"></script>

...

<body>
  <my-component title="Hello, Riot.js"></my-component>
</body>