Angular Service RxJS

Angular RxJS

이번 포스트는 RxJS를 이용해 데이터를 공유하는 방법에 대해서 알아보겠습니다. RxJS에 대한 이론적인 내용은 다른 포스트에서 알아보기로 하고 여기서는 RxJS를 이용해 우리 예제를 어떻게 구현할 수 있나에 초점을 맞추어 보도록 하죠.

지금까지 작성한 우리 예제 프로그램은 search-box Component에서 Search 버튼을 클릭하면 Service의 method가 호출되서 JSON 데이터를 확보합니다. 이 데이터를 자동으로 list-box Component에 전달할 방법이 없었기 때문에 list-box Component에서 Service를 이용해 데이터를 가져가는 방식으로 동작했습니다.

여기서는 BehaviorSubject class를 이용해 보도록 하겠습니다. 이 BehaviorSubject는 Observable의 특별한 형태라고 보시면 됩니다. 연관된 데이터를 쉽게 구독할 수 있는 method와 데이터를 변경하기 위한 method등 사용하기 쉬운 몇가지 method를 제공해서 보다 쉽게 RxJS 기능을 이용할 수 있도록 고안된 class입니다.

먼저 http-support.service.ts 파일에 BehaviorSubject class 타입의 객체를 하나 생성합니다. 연관된 데이터를 생성자의 인자로 이용해서 객체를 생성합니다.

updateBooks: BehaviorSubject<IBook[]> = new BehaviorSubject<IBook[]>(this.books);

새로운 JSON 데이터가 만들어지면 updateBooks에 데이터를 밀어 넣습니다. 다음과 같은 method를 이용합니다.

this.updateBooks.next(tmp);
//this.books = tmp;

기존에는 JSON 데이터를 만들어서 this.books에 바로 assign했는데 이 데이터를 updateBooks의 method를 이용하여 books에 밀어 넣습니다.

이제 list-box Component를 수정할 차례입니다. 데이터를 가져오기 위한 버튼은 필요없으니 HTML에서 삭제합니다. 또한 버튼이 클릭되었을 때 Service에서 데이터를 가져오는 method도 의미가 없으니 삭제해야 겠네요.

list-box Component는 단순합니다. 주입된 Service의 updateBooks를 구독하고 있다가 데이터가 변경되면 변경된 데이터를 자동으로 가져와 Table의 DataSource에 injection하는 코드만 작성하면 됩니다. 생성자에서 처리하면 될 듯 합니다.

  constructor(private httpSupportService:HttpSupportService) {
    this.httpSupportService.updateBooks.subscribe(data => {
      this.books = data;
      this.dataSource = new MatTableDataSource<IBook>(this.books);
      this.dataSource.paginator = this.paginator;
    })
  }

BehaviorSubject class의 도움을 받으면 RxJS의 이론적인 내용과 Observable에 대한 내용을 잘 몰라도 쉽게 구현이 가능합니다. 하지만 나중에 RxJS의 이론적인 내용은 한번 보셔야 합니다.

마지막으로 부모 Component의 초기화 버튼을 누르면 list-box에 출력된 도서 내용도 초기화 되어야 합니다. 이 부분은 위의 내용을 응용해 구현해 보세요!!

우리 프로그램이 거의 완성되어가고 있습니다. 다음은 list-box에서 책을 선택하면 해당 책의 세부정보가 detail-box에 출력되도록 처리해 보겠습니다.