interval: 일정한 간격으로 값을 방출하는 Observable

1. 개념

interval은 RxJS에서 제공하는 생성 함수(creation operator) 중 하나입니다. 특정 시간 간격마다 숫자를 생성하여 Observable 스트림으로 내보내는 역할을 합니다. 이 스트림은 정해진 시간 간격으로 계속 값을 방출하며, 구독자가 구독 해제하지 않는 한 멈추지 않습니다.

2. 왜 사용하는가

interval은 시간 흐름에 따라 특정 작업을 반복적으로 수행해야 할 때 유용합니다. 예를 들어, 실시간으로 업데이트되는 카운터, 애니메이션 효과, 폴링(polling) 방식의 데이터 요청 등에 활용할 수 있습니다.

3. 동작 원리

interval(밀리초) 함수를 호출하면 Observable이 생성됩니다. 이 Observable은 밀리초 단위의 지정된 간격으로 0부터 시작하는 숫자를 방출합니다. 구독자가 subscribe() 메서드를 호출하여 Observable을 구독하면, 지정된 간격마다 새로운 숫자가 구독자에게 전달됩니다.

4. 예제 (인라인 코드로만, fenced 코드블록 금지)

import { interval } from 'rxjs'; const counter = interval(1000); // 1초 간격으로 숫자 방출 const subscription = counter.subscribe(value => { console.log(현재 값: ${value}); }); // 5초 후 구독 해제 setTimeout(() => { subscription.unsubscribe(); console.log('구독 해제됨'); }, 5000);

먼저 rxjs에서 interval을 import합니다. 그다음 interval(1000)을 호출하여 1초마다 숫자를 방출하는 Observable을 생성하고 counter 변수에 할당합니다. counter.subscribe()를 사용하여 Observable을 구독하고, 각 값이 콘솔에 출력되도록 콜백 함수를 등록합니다. setTimeout을 사용하여 5초 후에 subscription.unsubscribe()를 호출하여 Observable 구독을 해제합니다.

5. 실무 사용 사례

• 실시간 업데이트: 게임 점수, 주식 가격, 채팅 메시지 등 실시간으로 변하는 데이터를 표시하는 데 사용될 수 있습니다.
• 자동 저장: 일정 시간 간격으로 사용자의 입력 내용을 자동으로 저장하는 기능을 구현할 수 있습니다.
• 폴링: 서버에 주기적으로 요청을 보내 새로운 데이터를 확인하는 폴링 기능을 구현할 수 있습니다. (단, 폴링은 WebSocket 등의 대안보다 비효율적일 수 있으므로 신중하게 고려해야 합니다.)

6. 주의할 점

• interval은 기본적으로 무한히 값을 방출하므로, 구독 해제를 잊으면 메모리 누수가 발생할 수 있습니다.
• unsubscribe() 메서드를 호출하여 더 이상 값을 받지 않도록 해야 합니다.
• 구독 해제 시점을 명확히 정의하고, 컴포넌트 언마운트(unmount) 등의 라이프사이클 이벤트에 연결하여 자동으로 구독 해제하도록 구현하는 것이 좋습니다.

7. 핵심 정리

interval은 정해진 시간 간격으로 값을 방출하는 Observable을 생성하며, 구독 해제를 통해 불필요한 연산을 중단하고 메모리 누수를 방지할 수 있습니다. 리액티브 프로그래밍에서 중요한 개념이므로, interval의 동작 원리와 구독 해제 방법을 확실하게 이해해야 합니다.