Angular와 RxJs로 CRUD 요청 상태를 세밀하게 추적하기
2025-04-27 15:21:17Angular에서 RxJs를 활용한 CRUD 상태 추적
React나 Vue.js와 달리 Angular를 사용할 때, RxJs의 groupBy와 사용자 정의 오퍼레이터인 statedStream을 조합하면, 대규모 데이터셋에 대한 CRUD 요청 상태를 세밀하게 추적할 수 있습니다. 특히, 각 데이터 엔티티별로 로딩 상태를 보여주고 에러 처리까지 손쉽게 구현할 수 있다는 점이 강점입니다.
statedStream 오퍼레이터: 비동기 요청 상태 추적
statedStream은 비동기 요청의 로딩 상태를 추적하는 데 유용합니다. Angular의 httpResource와 유사하지만, 전체 과정이 observable 스트림 내에서 이루어집니다. 이 코드 스니펫은 API 호출 시 각각의 호출 상태를 관리하도록 돕습니다.
export function statedStream<T>(
toCall: Observable<T>,
initialValue: T
): Observable<SatedStreamResult<T>> {
return toCall.pipe(
map(
(result) => ({
isLoading: false,
isLoaded: true,
hasError: false,
error: undefined,
result,
})
),
startWith({
isLoading: true,
isLoaded: false,
hasError: false,
error: undefined,
result: initialValue,
}),
catchError((error) => of({
isLoading: false,
isLoaded: false,
hasError: true,
error,
result: initialValue,
}))
);
}
groupBy 오퍼레이터의 활용: 병렬 요청 관리
RxJs의 groupBy 오퍼레이터는 처음 접했을 때 이해하기 어려울 수 있지만, 스트림을 키(key) 별로 그룹핑하여 병렬 처리를 쉽게 할 수 있다는 점에서 무척 유용합니다. 예제에서는 updateItem$ 스트림을 ID별로 그룹핑해 각각의 엔티티에 대해 API 요청을 관리합니다.
updateItem$
.pipe(
groupBy((updateItem) => updateItem.id),
mergeMap((group$) => {
console.log('group$', group$.key);
return group$.pipe(
switchMap((updateItem) =>
statedStream(updateApiCall$(updateItem), updateItem)
)
);
})
)
.subscribe((data) => console.log('Received:', data));
현실적인 예제: 리스트의 엔티티 상태 관리
현실의 앱에서는 여러 데이터 엔티티의 상태를 동시다발적으로 관리해야 할 때가 많습니다. React 등과 달리, Angular와 RxJs는 이 작업을 더욱 직관적으로 처리할 수 있도록 합니다. 이 예제에서는 각 API 요청의 상태를 리스트로 보여주는 방법을 설명합니다.
코드 설명 및 주요 파일
data-list.component.ts에서는 각 엔티티의 로딩 상태를statedStream으로 추적하며, 상태별로 다른 UI를 보여주도록 설정합니다.data-list.component.html에서는 상태를 기반으로 한 CSS 클래스 적용과 함께, 사용자에게 직관적인 인터페이스를 제공합니다.
성능 최적화와 코드 재사용
Angular와 RxJs를 사용하면 선언적/반응형 프로그래밍 접근 방식 덕분에 코드의 유지보수가 쉬워지며, 다양한 상황에서 코드를 재사용하기 쉬워집니다. 예제에서는 메모리 누수 방지를 위해 API 요청 완료 후 스트림을 적절히 unsubscribe 처리하는 부분도 포함되어 있습니다.
결론: 다양한 상황에서의 활용 가능성
이번 포스트에서는 Angular와 RxJs를 조합하여 CRUD 작업의 상태를 세밀하게 추적하는 방법을 알아보았습니다. 앞으로는 이 패턴을 발전시켜, 더 많은 기능을 추가할 계획입니다. 질문이나 추가적인 논의가 필요하시면 언제든지 댓글로 알려주세요.