Unsubscribe하지 않는 누군가

개요

Angular, RxJS를 사용하는 사람이라면 「반드시 unsubscribe 한다」는 몇번이나 들은 적이 있다고 생각합니다. 이전에 쓴 기사 하지만 언급했듯이, 이 이유는 「컴퍼넌트가 파기되어도 Subscription만이 계속 남아 버리기 때문」입니다. 저도 머리로는 알고 언제나 실제로 이것으로 빠진 예를 본 적이 없었습니다만, 딱 조금 전에 그러한 케이스를 만났기 때문에 데모를 만들어 보았습니다. 아직 사용하기 시작해 핀과 오지 않는 사람등의 이해의 도움이 되면 기쁩니다.

데모

중요한 데모는 여기입니다.
쉽게 시스템을 설명합니다. 왼쪽 버튼으로 어떤 귀신을 내는지 바꿀 수 있습니다. active가 된 귀신은 「귀신을 낸다」버튼의 클릭 이벤트를 subscribe 하게 됩니다. 한 번 active 를 전환할 때마다 subscribe 하고 있던 컴퍼넌트의 인스턴스는 파기됩니다.
이 귀신 가운데, unsubscribe를 잊어버린 귀신이 있으므로 데모를 조작하여 어느 쪽인지 맞추어 보세요. .

데모 해설

앞서 언급했듯이 active를 전환할 때마다 subscribe 중인 구성 요소의 인스턴스가 삭제됩니다. 하지만, ngOnDestroy 로 올바르게 unsubscribe 되어 있지 않은 경우는 컴퍼넌트가 파기되어도 subscribe 하고 있는 subscription 는 파기되지 않습니다. 따라서 다른 귀신으로 active를 전환해도 '귀신 보내기' 버튼을 누를 때 이전 귀신도 함께 나오게 됩니다. 참고로 이번 코드는 이쪽입니다.
그럼 데모의 움직임을 정리해 대답을 보자.
- 첫 번째 선택
- 두 번째 선택
- "귀신 보내기"
- 첫 번째와 두 번째
: 따라서 첫 번째 귀신은 unsubscribe 주름지고 있습니다.
- 세 번째 선택
- "귀신 보내기"
- 첫 번째와 두 번째와 세 번째
: 따라서 두 번째 귀신은 unsubscribe 주름지고 있습니다.
- 다시 첫 번째 귀신을 선택
- 첫 번째 귀신 x2, 두 번째 귀신이 나옵니다.
: 따라서 세 번째 귀신은 unsubscribe되어 있습니다.

무엇이 무서운가

적당히 active를 바꾸고 버튼을 누르면 알 수 있다고 생각합니다만, 후시말되지 않은 경우, 한번의 이벤트 발화로의 subscribe 처리가 active를 바꿀 때마다 소문이 많아집니다. 이것이 만약, 귀신을 내는 것이 아니라 백엔드로부터 데이터를 취득하는 처리라면 어떨까요. 작업을 할 때마다 점점 더 요청이 늘어나 화면이 무거워집니다. 끔찍하네요 ...

덤: 이런 때는 후시말 잊을지도

위에서 언급했듯이 하나의 이벤트에 대해 한 번만 실행할 수없는 처리 (위의 예에서 말하면 백엔드에 대한 요청)가 많이 동시에 일어나는 경우 후시말 잊을 것으로 예측됩니다.
그 밖에, 「subscribe 처리가 생각하는 거동을 하지 않는다」 경우도 이 케이스가 있을 수 있습니다. 이미 언급했듯이 subscription이 남아 있더라도 구성 요소 자체가 폐기되므로 예를 들어 subscribe에서 구성 요소 변수를 업데이트해도 업데이트되지 않습니다. console.log 에서 확인해 절대로 여기에 이벤트는 도착하고 있는데, 뷰에 반영되지 않는다! 그렇다면 이것도 나중에 잊을 수 있습니다.

요약

특히 오류가 발생하는 종류가 아니므로 모두 조심하는 것이 중요합니다.