이벤트 기반 통신

컴포넌트는 이벤트를 발생시켜 다른 컴포넌트에게 메시지를 전달할 수 있습니다. 이벤트는 this.trigger('이벤트명', 데이터)를 사용하여 발생시킬 수 있으며, 다른 컴포넌트는 this.on('이벤트명', 콜백함수)를 사용하여 이벤트를 구독할 수 있습니다.

<my-component>
  <!-- 이벤트 발생 -->
  <button onclick="{() => { this.trigger('myEvent', '데이터') }}">이벤트 전달</button>
</my-component>

<other-component>
  <!-- 이벤트 구독 -->
  <my-component on-myEvent="{(data) => { console.log(data) }}"> </my-component>
</other-component>

my-component에서 ‘myEvent’라는 이벤트를 발생시키면, other-component에서 해당 이벤트를 구독하여 콜백 함수를 실행합니다. 이를 통해 컴포넌트 간 통신이 이루어집니다.

Props를 통한 통신

컴포넌트 간 데이터 전달을 위해 Riot.js에서는 props를 사용할 수 있습니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, 자식 컴포넌트의 태그 속성에 값을 전달하는 방식입니다.

<parent-component>
  <!-- props를 통해 데이터 전달 -->
  <child-component name="John" age="25"></child-component>
</parent-component>

<child-component>
  <!-- props 사용 -->
  <p>이름: { this.props.name }</p>
  <p>나이: { this.props.age }</p>
</child-component>

parent-component에서 child-component로 name과 age라는 props를 전달합니다. 자식 컴포넌트에서는 this.props를 사용하여 전달받은 값을 사용할 수 있습니다.

Riot.js에서는 이 외에도 컴포넌트 간 데이터 공유를 위한 상태 관리 등 다양한 방법을 제공합니다. 자세한 내용은 Riot.js 공식 문서를 참고하시기 바랍니다.