/ ANGULAR

Angular 강좌(15) - Service RxJS

Angular 강좌는 여러 절로 구성되어 있습니다.


Angular RxJS

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

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

여기서는 BehaviorSubject class를 이용해 보도록 하겠습니다. 이 BehaviorSubjectObservable의 특별한 형태라고 보시면 됩니다. 연관된 데이터를 쉽게 구독할 수 있는 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에 출력되도록 처리해 보겠습니다.

End.


Angular 강좌는 아래의 책과 사이트를 참조했습니다. 조금 더 자세한 사항을 알고 싶으시면 해당 사이트를 방문하세요!!