[javascript] Riot.js를 활용한 UI 컴포넌트 개발

04 Dec 2023

javascript

Riot.js는 간편하고 가벼운 자바스크립트 UI 라이브러리입니다. Riot.js는 MVC 패턴을 따르며, React와 유사한 방식으로 UI 컴포넌트를 개발할 수 있습니다. 이번 글에서는 Riot.js를 사용하여 UI 컴포넌트를 개발하는 방법을 알아보겠습니다.

1. Riot.js 설치하기

Riot.js를 사용하기 위해 먼저 설치해야 합니다. 다음 명령어를 사용하여 Riot.js를 설치할 수 있습니다.

npm install --save riot

2. Riot.js 컴포넌트 작성하기

Riot.js에서 UI 컴포넌트는 <script> 태그와 <template> 태그로 구성됩니다. 이 두 가지 태그를 사용하여 컴포넌트의 로직과 HTML 템플릿을 작성할 수 있습니다.

다음은 Riot.js를 사용하여 간단한 버튼 컴포넌트를 작성하는 예시입니다.

<my-button>
  <script>
    import riot from 'riot';

    export default riot.component({
      name: 'my-button',
      template: `
        <button>{ opts.label }</button>
      `,
      defaults: {
        label: 'Click me'
      }
    });
  </script>

  <template>
    <button>{ opts.label }</button>
  </template>
</my-button>

위 코드에서 my-button이라는 컴포넌트를 정의하고, template 태그 내부에는 컴포넌트의 HTML 템플릿을 작성합니다. { opts.label }은 컴포넌트 속성인 label을 출력하는 부분입니다.

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

Riot.js 컴포넌트를 사용하려면 해당 컴포넌트를 페이지에 등록해야 합니다. 다음은 my-button 컴포넌트를 페이지에 등록하고 사용하는 예시입니다.

<my-app>
  <script>
    import riot from 'riot';
    import MyButton from './my-button';

    export default riot.component({
      name: 'my-app',
      template: `
        <div>
          <h1>Hello, Riot.js!</h1>
          <my-button label="Click me"></my-button>
        </div>
      `,
    });
  </script>

  <template>
    <div>
      <h1>Hello, Riot.js!</h1>
      <my-button label="Click me"></my-button>
    </div>
  </template>
</my-app>

위 코드에서 my-app 컴포넌트에서 my-button 컴포넌트를 사용하고 있습니다. 이처럼 컴포넌트를 사용하려면 해당 컴포넌트를 import하고, HTML에 컴포넌트 태그를 추가해야 합니다.

4. Riot.js 컴포넌트 동작하기

Riot.js 컴포넌트는 컴포넌트 내부에서 정의된 로직에 따라 동작합니다. 이 로직을 변경하려면 컴포넌트 속성을 수정하면 됩니다.

예를 들어, 버튼이 클릭되었을 때 메시지를 출력하는 컴포넌트를 작성해보겠습니다.

<my-button>
  <script>
    import riot from 'riot';

    export default riot.component({
      name: 'my-button',
      template: `
        <button onclick="{ handleClick }">{ opts.label }</button>
      `,
      defaults: {
        label: 'Click me'
      },
      handleClick() {
        console.log('Button clicked');
      }
    });
  </script>

  <template>
    <button onclick="{ handleClick }">{ opts.label }</button>
  </template>
</my-button>

위 코드에서 handleClick 함수가 추가되었습니다. 이 함수는 버튼이 클릭되었을 때 실행되며, 콘솔에 ‘Button clicked’라는 메시지를 출력합니다.

5. 결론

이번 글에서는 Riot.js를 사용하여 UI 컴포넌트를 개발하는 방법에 대해 알아보았습니다. Riot.js는 가벼우면서도 강력한 기능을 제공하여 UI 개발을 더욱 편리하게 할 수 있습니다. Riot.js의 공식 문서를 참고하여 더 많은 기능과 사용법을 익힐 수 있습니다.

Riot.js 공식 문서: https://riot.js.org/
Riot.js GitHub 저장소: https://github.com/riot/riot