[javascript] Riot.js에서 컴포넌트는 어떻게 정의하고 사용하나요?

24 Nov 2023

javascript

컴포넌트 정의하기

Riot.js에서 컴포넌트는 riot.tag 함수를 사용하여 정의됩니다. 이 함수는 HTML 템플릿, 스타일 및 동작을 포함하는 컴포넌트를 생성합니다. 아래는 간단한 컴포넌트의 예입니다.

riot.tag('my-component', `
  <h1>{ title }</h1>

  <p>내용: { content }</p>

  <button onclick="{ handleClick }">클릭</button>
`, function (opts) {
  this.title = '제목';
  this.content = '내용입니다.';

  this.handleClick = function () {
    alert('클릭되었습니다!');
  };
});

위의 예제에서 riot.tag 함수는 my-component라는 태그를 생성합니다. 템플릿은 문자열로 전달되며, 중괄호 {} 안에 있는 표현식은 컴포넌트의 데이터로 바인딩됩니다.

컴포넌트 사용하기

컴포넌트를 사용하려면 해당 태그를 HTML에 추가해야 합니다. 예를 들어, <my-component></my-component>라는 HTML 요소를 추가하면 my-component 컴포넌트가 그 위치에 렌더링됩니다.

컴포넌트에 데이터를 전달하려면 속성을 사용합니다. 예를 들어, <my-component title="새로운 제목" content="새로운 내용"></my-component>와 같이 속성을 지정할 수 있습니다.

컴포넌트의 동작은 컴포넌트 내부의 JavaScript 코드에서 정의됩니다. 위의 예제에서는 handleClick 함수가 버튼 클릭 이벤트를 처리합니다.

컴포넌트 정의하기

컴포넌트 사용하기

참고 자료