[javascript] Riot.js에서의 컴포넌트 간 통신

04 Dec 2023

javascript

Riot.js는 간단하고 가벼운 웹 컴포넌트 라이브러리입니다. 이 라이브러리를 사용하면 애플리케이션을 작은 조각으로 나누어 개발할 수 있습니다. Riot.js는 컴포넌트 간의 효과적인 통신을 지원하여 컴포넌트 사이의 데이터 교환과 이벤트 전달을 간단하게 처리할 수 있습니다.

컴포넌트 통신의 기본 원리

Riot.js에서는 컴포넌트 간의 통신을 위해 부모-자식 관계와 이벤트를 기반으로 합니다. 부모 컴포넌트는 자식 컴포넌트에게 데이터를 전달하고, 자식 컴포넌트는 이벤트를 발생시켜 부모 컴포넌트에게 정보를 전달합니다.

이렇게 데이터 전달과 이벤트 전달을 통해 컴포넌트 간의 통신이 이루어집니다. Riot.js는 이러한 통신을 간단하게 처리할 수 있는 메서드와 이벤트를 제공합니다.

데이터 전달하기

자식 컴포넌트에 데이터를 전달하기 위해서는 send 메서드를 사용합니다. 이 메서드를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전송할 수 있습니다.

// 부모 컴포넌트
<parent>
  <child></child>
</parent>

// 자식 컴포넌트
<child>
  <p>{ message }</p>
  <script>
    this.message = '';
    this.on('update', (data) => {
      this.message = data.message;
    });
  </script>
</child>

// 데이터 전송
this.child.send({ message: 'Hello from parent' });

위의 예제에서 send 메서드를 이용해 자식 컴포넌트로 데이터를 전달합니다. 자식 컴포넌트는 update 이벤트를 통해 전달받은 데이터를 사용할 수 있습니다.

이벤트 전달하기

부모 컴포넌트에게 이벤트를 전달하기 위해서는 trigger 메서드를 사용합니다. 이 메서드를 통해 자식 컴포넌트는 부모 컴포넌트에게 이벤트를 발생시킬 수 있습니다.

// 부모 컴포넌트
<parent>
  <child>
    <button onclick={ handleClick }>Click me</button>
  </child>
</parent>

// 자식 컴포넌트
<child>
  <script>
    handleClick(e) {
      this.trigger('custom-event', {
        message: 'Hello from child',
      });
    }
  </script>
</child>

// 이벤트 수신
this.on('custom-event', (data) => {
  console.log(data.message);
});

위의 예제에서 자식 컴포넌트의 버튼을 클릭하면 handleClick 메서드가 실행되며, 부모 컴포넌트에게 custom-event를 발생시킵니다. 부모 컴포넌트는 on 메서드를 통해 이벤트를 수신하고 처리할 수 있습니다.

결론

Riot.js는 컴포넌트 간의 효과적인 통신을 위해 부모-자식 관계와 이벤트를 활용합니다. 데이터 전달과 이벤트 전달을 통해 컴포넌트 간의 통신이 간단하고 편리하게 이루어집니다. 이를 통해 애플리케이션 개발 시 모듈화와 재사용성을 높일 수 있습니다.

더 자세한 내용은 Riot.js 공식 문서를 참고해주세요.

Riot.js 공식 문서: https://riot.js.org/