1) 신호 대 RxJS: Angular 16에서 처음부터 신호 변수를 생성하고 이를 Observable과 비교합니다.

사이드바 메뉴와 상단 메뉴가 있는 예에서는 버튼을 누를 때마다 상단 메뉴에서 사이드바 메뉴를 축소하라고 지시합니다.

RxJS 사용:

이 통신은 제목과 Observable을 사용하는 서비스에서 수행됩니다. 여기서 버튼을 클릭할 때마다 다음이 호출되어 방출된 값을 구독된 Observable에 전달합니다. 사이드바 메뉴 구성 요소는 단순히 구독되며 HTML에서 이 속성을 사용합니다. 먼저 서비스에서 주제를 생성한 다음, 여기에서 관찰 가능 항목을 생성하고 다음을 호출하여 방출된 값을 전달합니다.

신호 포함:

이것은 신호를 사용하여 간단하게 수행할 수 있습니다. 특정 간단한 경우에 더 나은 성능을 달성하기 위해 신호가 Angular에서 생성되었습니다. @angular/core에서 가져옵니다.

신호를 선언해야 하며 해당 신호를 업데이트할 때마다 해당 신호에 대해 set을 호출합니다. 사이드바 메뉴 구성요소에서는 해당 속성을 참조하기만 하면 되며, HTML에서 신호를 사용하려면 해당 값을 얻기 위해 속성 주위에 괄호를 넣어야 합니다. 이것이 신호가 사용되는 방식이기 때문입니다.

업데이트를 수행할 수도 있으며, 이는 이전 값을 알려주는 추가 이점이 있습니다. 이를 위해 이전 값과 해당 유형을 수신하도록 지정하고 화살표 함수를 사용하여 부정된 새 값인 새 값을 나타냅니다.

관측 가능 항목을 신호로 변환하고 신호를 관측 가능 항목으로 변환하는 방법도 있습니다.

신호가 주제를 대체하는 것은 아닙니다. 둘 다 관찰 가능 항목과 함께 훨씬 더 강력하고 RxJS 연산자(RxJS를 통해 훨씬 더 많은 제어 기능이 있음)와 같은 더 많은 기능을 가지고 있기 때문입니다. 그러나 신호는 간단한 작업 방법을 제공하며 다른 라이브러리 및 프레임워크와 공통됩니다.

RxJS는 Angular가 아닌 Microsoft의 라이브러리입니다. 대조적으로, Signals는 상태가 변경될 때 어떤 부분이 변경되었는지 Angular가 정확히 알 수 있도록 해주기 때문에 더 큰 제어와 성능을 제공하는 Angular의 라이브러리입니다. 이렇게 하면 특정 부분에만 초점을 맞춰 전체 구성 요소를 다시 렌더링할 필요가 없습니다.

2) Angular 16의 RxJS에서 takeUntilDestroyed를 사용하여 구독을 취소하는 새롭고 단순화된 방법입니다.

Angular에서는 Observable 구독을 취소하는 것이 중요합니다. 예를 들어 OnInit에서는 구독을 저장하고 OnDestroy에서는 구독을 취소합니다.

기존 방법은 구독과 함께 변수를 저장하고 구독 시 이를 해당 변수에 저장한 후 OnDestroy에서 해당 구독을 삭제하는 것이었습니다.

자세한 설명: 구독(RxJS에서) 유형의 속성이 생성되었습니다. 이 속성은 ngOnInit에서 초기화되어 구독이 생성될 때 구독 참조를 할당합니다. 그런 다음 ngOnDestroy에서 구독이 취소됩니다. 구성 요소가 구독 변수를 정의하지 않은 경우 물음표를 사용하여 정의되었는지 확인하거나 조건을 통해 오류를 처리해야 합니다.

이제 RxJS 연산자 takeUntilDestroyed를 사용하면 OnDestroy나 구독 변수를 만들지 않고도 이 작업을 더 간단하게 수행할 수 있습니다. 이것이 하는 일은 구성요소가 소멸되려고 할 때 자동으로 구독을 취소하는 것입니다. DestroyRef 서비스를 주입하고 전달하는 것이 중요하므로 구성 요소가 언제 파괴되는지 알 수 있습니다.

자세한 설명: 이제 구독을 취소하지 않는 경우 RxJS 파이프를 추가하고 NEW 연산자인 takeUntilDestroyed()를 보냅니다. 이를 위해서는 서비스인 destroyRef를 전달해야 합니다(@angular에서). /core) 생성자에 삽입할 수 있습니다.

예: 사이드바 서비스에서는 navbar 구성 요소의 버튼 클릭을 수신합니다. takeUntilDestroyed()를 사용하면 구성 요소가 삭제될 때만 구독을 취소하여 여러 구독을 방지합니다. 이 경우 우리는 항상 버튼이 눌렸는지 여부를 듣고 싶습니다. 따라서 구성 요소가 파괴된 경우에만 구독을 취소하려고 합니다.

이 작업을 수행하는 것이 중요합니다. 그렇지 않으면 다른 구성 요소에 있어도 청취하고 구성 요소가 파괴되므로 앱을 닫는 경우에만 구독이 취소됩니다. 이는 항상 활성 상태인 경우, 예를 들어 첫 번째 탐색에서 페이지 구성 요소를 탐색할 때 구독한 다음 다른 페이지로 이동하고 첫 번째 페이지로 돌아오면 두 번째 구독이 되기 때문에 중요합니다. 그 결과 두 개의 활성 구독이 생성됩니다. 따라서 구독을 취소하는 것이 중요합니다.

중요 사항: HTTP 요청을 구독할 때 구독 취소가 자동으로 수행되므로 구독을 취소할 필요가 없습니다.

3) Angular에서 신호의 효과. 신호의 변경 사항을 수신합니다.

예를 들어 부울을 반환하는 신호가 있고 아래 메서드에서는 업데이트로 업데이트됩니다.

신호가 바뀔 때마다 알림을 받고 싶지만 이 방법뿐만 아니라 여러 곳에서 변경된다고 상상해 보세요. 변경될 때마다 무언가를 하고 싶다면 이펙트를 사용하여 이를 수행할 수 있습니다. 이 함수는 신호를 받아 효과 내에서 메서드를 자동으로 실행하도록 변경되는지 확인합니다.

예를 들어 콘솔 로그 대신 로컬 저장소에 값을 저장하고 해당 값으로 인스턴스화할 수 있습니다. 이는 우리가 모르는 코드로 작업할 때 특히 유용하며 코드가 수정되는 위치가 얼마나 되는지 확실하지 않습니다.

— EfisioDev의 Angular 과정을 기반으로 한 노트 —