[javascript] RxJS를 이용한 상태 관리 방식은?
RxJS를 사용한 상태 관리는 “옵저버블(observable)”이라는 개념을 기반으로 합니다. 옵저버블은 데이터 스트림을 나타내는 객체로, 이벤트나 비동기 작업의 결과를 전달할 수 있습니다. 상태 변경이 발생할 때마다 새로운 데이터 스트림을 방출하고, 구독자는 해당 데이터를 받아 처리하게 됩니다.
예를 들어, 웹 애플리케이션에서 사용자의 로그인 상태를 관리하는 경우를 생각해보겠습니다. RxJS를 사용하여 상태를 관리하려면, 먼저 옵저버블을 생성해야 합니다. 이 옵저버블은 로그인 상태가 변경될 때마다 새로운 값을 방출합니다.
import { BehaviorSubject } from 'rxjs';
// 초기 상태값을 'false'로 설정한 BehaviorSubject 생성
const isLoggedIn$ = new BehaviorSubject(false);
// 상태 변경 함수
function setLoggedIn(value) {
isLoggedIn$.next(value);
}
// 상태 변경 감지를 위한 구독
isLoggedIn$.subscribe((isLoggedIn) => {
console.log('로그인 상태 변경:', isLoggedIn);
});
// 상태 변경 예시
setLoggedIn(true); // 'true'로 상태 변경
setLoggedIn(false); // 'false'로 상태 변경
위 코드에서 BehaviorSubject
는 옵저버블의 한 종류로, 초기 값과 함께 생성됩니다. next
메소드를 사용하여 상태를 변경하고, 구독자는 subscribe
메소드를 통해 해당 상태 변경을 감지합니다.
이렇게 구현된 RxJS를 사용한 상태 관리 방식은 간결하면서도 효율적입니다. 상태 변경을 쉽게 추적하고, 여러 구독자들이 동시에 상태를 관찰하고 처리할 수 있습니다. RxJS를 이용한 상태 관리는 복잡한 애플리케이션에서 유용하게 사용될 수 있습니다.
더 자세한 내용은 RxJS 공식 문서를 참고하시기 바랍니다.