Riot.js는 가볍고 유연한 웹 컴포넌트 라이브러리이며, 상태 관리를 위한 내장 라이브러리를 제공합니다. 이 상태 관리 라이브러리를 활용하면 컴포넌트 간의 데이터 공유와 업데이트를 효율적으로 처리할 수 있습니다.

Riot.js의 내장 상태 관리 기능

Riot.js는 애플리케이션의 상태를 관리하기 위해 observable과 subscribe라는 두 가지 내장 기능을 제공합니다.

observable

observable 함수는 컴포넌트의 상태를 옵저버블 객체로 변환해주는 역할을 합니다. 컴포넌트에 상태 변수를 정의한 뒤, observable 함수로 해당 변수를 감싸면 해당 변수를 감시할 수 있는 옵저버블 객체가 생성됩니다.

class MyComponent extends Riot.Element {
  constructor() {
    super();

    this.count = riot.observable(0);
  }

  ...
}

위 예제에서 count 변수는 observable 함수에 의해 옵저버블 객체로 변환되었습니다.

subscribe

subscribe 함수는 옵저버블 객체에 변화가 발생할 때마다 실행될 콜백 함수를 등록하는 역할을 합니다. 이를 통해 상태의 변화를 감지하고 필요한 작업을 수행할 수 있습니다.

class MyComponent extends Riot.Element {
  constructor() {
    super();

    this.count = riot.observable(0);

    this.count.subscribe((newValue) => {
      console.log(`count가 ${newValue}로 변경되었습니다.`);
    });
  }

  ...
}

위 예제에서 count 변수의 값이 변경될 때마다 콜백 함수가 실행되어 해당 메시지가 출력됩니다.

Riot.js 상태 관리 라이브러리 활용하기

Riot.js의 상태 관리 라이브러리를 활용하면 컴포넌트들 간의 데이터 공유와 업데이트가 간편해집니다. 예를 들어, 여러 컴포넌트에서 사용하는 테마 색상을 상태 관리를 통해 관리할 수 있습니다.

class ThemeStore {
  constructor() {
    this.theme = riot.observable('light');
  }

  setTheme(theme) {
    this.theme(theme);
  }
}

const themeStore = new ThemeStore();

class HeaderComponent extends Riot.Element {
  constructor() {
    super();
    
    this.themeStore = themeStore;
  }

  changeTheme() {
    this.themeStore.setTheme('dark');
  }
}

class SidebarComponent extends Riot.Element {
  constructor() {
    super();
    
    this.themeStore = themeStore;

    this.themeStore.theme.subscribe((newTheme) => {
      console.log(`테마가 ${newTheme}로 변경되었습니다.`);
      // 테마 변경에 따른 UI 업데이트 수행
    });
  }
}

위 예제에서는 ThemeStore 클래스를 생성하여 테마를 관리하고, HeaderComponent와 SidebarComponent는 해당 테마를 공유합니다. changeTheme 메서드를 호출하여 테마를 변경하면 SidebarComponent에서 등록한 콜백 함수가 실행되어 UI가 업데이트될 수 있습니다.

이처럼 Riot.js의 상태 관리 라이브러리를 활용하면 컴포넌트 간의 데이터 공유와 업데이트를 효율적으로 처리할 수 있습니다. Riot.js 문서에서 더 자세한 정보를 확인할 수 있습니다[^1^].