computed() 시그널로 상태 파생하기

시그널을 생성하고 갱신하는 방법을 배웠으니, 이제 computed() 시그널을 알아봅시다. computed() 시그널은 의존성이 변경되면 자동으로 갱신되는 파생 값입니다. 다른 시그널을 기반으로 반응형 계산을 할 때 유용합니다.

이번 실습에서는 computed() 함수로 원본 시그널이 변경되면 자동으로 갱신되는 파생 상태를 만드는 방법을 배웁니다.

사용자 상태 시그널에서 정보를 파생하는 computed 값을 추가해서 사용자 상태 시스템을 개선해 봅시다. 시작 코드에는 'online', 'away', 'offline' 세 가지 상태가 있습니다.

computed 함수 불러오기

기존 import 구문에 computed를 추가합니다.

// Add computed to existing imports
import {Component, signal, computed, ChangeDetectionStrategy} from '@angular/core';

알림용 computed() 시그널 생성하기

사용자 상태를 기준으로 알림을 활성화할지 결정하는 computed() 시그널을 추가합니다.
```
notificationsEnabled = computed(() => this.userStatus() === 'online');
```
이 computed() 시그널은 userStatus 시그널이 변경될 때마다 값을 다시 계산합니다. computed 함수 안에서 this.userStatus()를 호출해서 시그널 값을 읽는다는 점에 주목하세요.

상태 설명 메시지용 computed() 시그널 생성하기

사용자 상태를 설명하는 메시지를 생성하는 computed() 시그널을 추가합니다.

statusMessage = computed(() => {
  const status = this.userStatus();
  switch (status) {
    case 'online':
      return 'Available for meetings and messages';
    case 'away':
      return 'Temporarily away, will respond soon';
    case 'offline':
      return 'Not available, check back later';
    default:
      return 'Status unknown';
  }
});

computed() 시그널 안에서 switch 구문과 문자열 변환으로 더 복잡한 로직을 처리할 수도 있습니다.

근무 시간 여부를 계산하는 computed() 시그널 생성하기

사용자가 근무 시간 중인지 계산하는 computed() 시그널을 추가합니다.
```
isWithinWorkingHours = computed(() => {
  const now = new Date();
  const hour = now.getHours();
  const isWeekday = now.getDay() > 0 && now.getDay() < 6;
  return this.userStatus() !== 'offline' && isWeekday && hour >= 9 && hour < 17;
});
```
computed() 시그널로 계산을 수행하고 여러 데이터 소스를 조합할 수 있습니다. userStatus가 변경되면 값이 자동으로 갱신됩니다.
템플릿에 computed 값 표시하기

템플릿에는 이미 "Loading..."이라고 표시되는 영역이 있습니다. 이를 computed() 시그널로 교체합니다:
1. 알림 영역의 Loading...을 @if 블록으로 교체합니다:
```
@if (notificationsEnabled()) {
  Enabled
} @else {
  Disabled
}
```
1. 메시지 영역의 Loading...을 다음과 같이 교체합니다:
```
{{ statusMessage() }}
```
1. 근무 시간 영역의 Loading...을 @if 블록으로 교체합니다:
```
@if (isWithinWorkingHours()) {
  Yes
} @else {
  No
}
```
computed() 시그널도 일반 시그널과 마찬가지로 괄호를 붙여서 호출합니다!

computed() 시그널을 만드는 방법을 배웠습니다!

다음 핵심 내용을 기억하세요:

반응형 동작: 의존성이 변경되면 자동으로 갱신됩니다.
읽기 전용: computed 값은 다른 시그널에서 파생되므로 직접 설정할 수 없습니다.
복잡한 로직 처리: 계산, 변환, 파생 상태에 사용할 수 있습니다.
동적인 상태를 효율적으로 계산: Angular는 의존성이 실제로 변경되었을 때만 값을 다시 계산합니다.

다음 단계에서는 linkedSignal로 상태를 파생하는 또 다른 방법을 배웁니다!

computed 함수 불러오기

알림용 computed() 시그널 생성하기

상태 설명 메시지용 computed() 시그널 생성하기

근무 시간 여부를 계산하는 computed() 시그널 생성하기

템플릿에 computed 값 표시하기