RxJS에서 Subject 사용법 이해

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, 특히 Angular 및 RxJS를 사용하는 개발자

핵심 요약

• Subject는 값이 아닌 이벤트 발생만을 신호로 사용하여, undefined만 전달함
• 타입스크립트 안전성 강화 및 의도치 않은 데이터 전송 방지에 유리
• 다중 구독자 지원 및 일반 Subject와 동일한 기능 제공
• Subject를 명시적으로 선언하는 것이 코드 가독성 향상에 도움

섹션별 세부 요약

1. Subject의 정의

• Subject는 값이 없고, 이벤트 발생만을 신호로 사용
• 코드 예시: const subject = new Subject();
• Subject는 Subject 타입의 특별한 경우로, void를 명시적으로 선언

2. Angular 예제 코드

• 버튼 클릭 시 voidSubject.next()를 호출하여 이벤트 발생
• async 파이프를 사용해 이벤트를 구독 및 표시
• 코드 예시:

```typescript

voidSubject = new Subject();

voidObservable = this.voidSubject.asObservable().pipe(scan((acc: string[], curr: any) => [...acc, curr], []));

```

3. 의도치 않은 값 전송 방지

• voidSubject.next('Oops!')와 같은 값 전송 시 컴파일 타임 오류 발생

```typescript

Argument of type 'string' is not assignable to parameter of type 'void'.

```

• Subject를 명시적으로 선언하면 타입 안전성 강화

4. 일반 Subject와의 차이점

• Subject()를 선언하면 Subject와 동일하지만, 값 전송 가능
• Subject를 명시적으로 선언하는 것이 개발자 의도를 명확히 전달

결론

• Subject는 이벤트 발생만을 신호로 사용하여 코드의 타입 안전성과 가독성을 높임
• 의도치 않은 데이터 전송을 방지하고, 다중 구독자 지원을 통해 실무에서 유용
• Angular 및 RxJS 프로젝트에서 이벤트 기반 통신을 구현할 때 명시적인 Subject 선언 권장