Angular Academy · 강의

computed로 상태 파생하기

기본 상태에서 읽기 모델을 만듭니다.

computed로 상태 파생하기은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

파생 상태

상태는 다른 상태에서 계산되는 경우가 많습니다. 예를 들어 항목에서 총합, 목록에서 필터링된 결과, 유효성 플래그를 계산할 수 있습니다. Angular의 computed()는 다른 신호에서 값을 파생하는 읽기 전용 신호를 만듭니다.

computed 만들기

computed()에 함수를 전달하십시오. 함수는 다른 신호를 읽고 값을 반환합니다. 결과는 종속 항목 중 하나가 변경될 때만 다시 계산됩니다.

import { signal, computed } from '@angular/core';

const price = signal(10);
const qty = signal(3);
const total = computed(() => price() * qty());
// total() === 30

자동 종속성 추적

종속성을 직접 선언할 필요가 없습니다. 함수 내부에서 읽는 모든 신호가 자동으로 종속성이 됩니다. qty가 변경되면 total이 다시 계산되지만, 관련 없는 신호가 변경될 때는 다시 계산되지 않습니다.

메모이제이션

computed()는 결과를 캐시합니다. 종속성이 변경될 때까지 여러 번 읽어도 함수는 한 번만 실행됩니다. 따라서 여러 템플릿 바인딩에서 접근하더라도 파생 읽기 모델을 저렴하게 사용할 수 있습니다.

const expensive = computed(() => heavyTransform(data()));
// reading expensive() repeatedly does not re-run heavyTransform

저장소에서 computed 사용하기

신호 저장소 내부에서 계산된 읽기 모델을 노출하면 컴포넌트가 템플릿에서 다시 계산하지 않고 바로 렌더링할 값을 사용할 수 있습니다.

@Injectable({ providedIn: 'root' })
export class CartStore {
  private _items = signal<Item[]>([]);
  readonly items = this._items.asReadonly();
  readonly count = computed(() => this._items().length);
  readonly subtotal = computed(() =>
    this._items().reduce((s, i) => s + i.price, 0));
}

computed 연결하기

계산된 신호는 다른 계산된 신호를 읽을 수 있습니다. 계층화된 읽기 모델을 구성하여 기본 파생 결과가 더 높은 수준의 모델에 값을 제공하도록 하십시오.

const subtotal = computed(() => items().reduce((s, i) => s + i.price, 0));
const tax = computed(() => subtotal() * 0.2);
const total = computed(() => subtotal() + tax());

필터링 및 검색

일반적인 읽기 모델은 검색 신호를 기준으로 목록을 필터링하는 것입니다. 목록이나 query가 변경될 때마다 필터링된 결과가 업데이트됩니다.

const query = signal('');
const all = signal<User[]>([]);
const filtered = computed(() =>
  all().filter(u => u.name.toLowerCase().includes(query().toLowerCase())));

부수 효과 없음

computed() 함수는 순수해야 합니다. 신호를 읽고 값을 반환하기만 해야 합니다. 내부에서 상태를 변경하거나 API를 호출하거나 다른 신호에 쓰지 마십시오. 부수 효과에는 대신 effect()를 사용하십시오.

동등성 및 업데이트 건너뛰기

기본적으로 computed는 참조 동등성(Object.is)을 사용하여 값이 변경되었는지 판단합니다. 새 값이 이전 값과 같으면 소비자에게 알리지 않아 불필요한 작업을 피합니다.

const status = computed(() => count() > 0 ? 'has' : 'empty');
// while count stays > 0 the string stays 'has' -> no downstream updates

템플릿에서 computed 사용하기

다른 신호와 마찬가지로 템플릿에서 계산된 신호를 읽으십시오. Angular는 계산된 값이 실제로 변경된 바인딩만 업데이트합니다.

@Component({
  template: '<p>Items: {{ store.count() }} — Total: {{ store.subtotal() }}</p>'
})
export class SummaryComponent {
  store = inject(CartStore);
}

computed와 메서드 비교

상태에서 파생되고 자동으로 업데이트되며 메모이제이션되어야 하는 값에는 computed()를 사용하십시오. 인수를 받거나 필요할 때만 실행해야 하는 일회성 계산에는 일반 메서드를 사용하십시오.

빠른 확인

계산된 신호에 대한 이해도를 확인해 보십시오.

요약

computed()를 사용하여 파생 상태를 만들었습니다. 자동 종속성 추적, 메모이제이션되는 순수 함수, 연결 가능한 읽기 모델, 동등성에 따른 업데이트 건너뛰기를 배웠습니다. 템플릿을 선언적으로 유지하려면 저장소에서 계산된 읽기 모델을 노출하십시오.

자주 묻는 질문

“computed로 상태 파생하기” 강의는 무료인가요?

네 — “computed로 상태 파생하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“computed로 상태 파생하기”에서 뭘 배우나요?

기본 상태에서 읽기 모델을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Angular Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“computed로 상태 파생하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Angular Academy(으)로 돌아가기