계산된 상태와 메서드
파생 상태와 업데이트 메서드를 추가합니다.
계산된 상태와 메서드은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
원시 상태 그 이상
유용한 스토어는 파생된 값과 동작을 노출합니다. SignalStore에서는 읽기 모델에 withComputed를 사용하고 액션에 withMethods를 사용해 이를 추가합니다.
withComputed
withComputed는 스토어의 현재 신호를 받아 computed() 신호 객체를 반환합니다. 이 신호들은 모든 계산된 값과 마찬가지로 메모이제이션되고 자동으로 업데이트됩니다.
import { signalStore, withState, withComputed } from '@ngrx/signals';
import { computed } from '@angular/core';
export const CartStore = signalStore(
withState({ items: [] as Item[] }),
withComputed(({ items }) => ({
count: computed(() => items().length),
total: computed(() => items().reduce((s, i) => s + i.price, 0))
}))
);계산된 값 읽기
계산된 멤버는 상태와 마찬가지로 스토어에 나타납니다. 템플릿에서 store.count()와 store.total()을 읽으세요. items가 변경되면 이 값들도 업데이트됩니다.
template: 'Items: {{ store.count() }} — {{ store.total() }}'withMethods
withMethods는 스토어를 받아 이름이 지정된 메서드를 반환합니다. 내부에서는 patchState를 사용해 상태를 불변 방식으로 업데이트하세요.
import { withMethods, patchState } from '@ngrx/signals';
withMethods((store) => ({
add(item: Item) {
patchState(store, (s) => ({ items: [...s.items, item] }));
},
clear() {
patchState(store, { items: [] });
}
}))메서드에서도 상태를 읽을 수 있습니다
메서드 내부에서는 스토어 인자로 전달된 현재 신호를 읽어 업데이트하기 전에 판단을 내릴 수 있습니다.
withMethods((store) => ({
toggle(id: string) {
const exists = store.items().some(i => i.id === id);
if (!exists) return;
patchState(store, (s) => ({
items: s.items.map(i => i.id === id ? { ...i, on: !i.on } : i)
}));
}
}))메서드에서 computed를 사용할 수 있습니다
withComputed가 withMethods보다 먼저 실행되므로 메서드에서 스토어가 이미 노출한 계산된 멤버를 읽을 수 있습니다.
withMethods((store) => ({
checkout() {
if (store.total() === 0) return;
// proceed...
}
}))의존성 주입하기
withMethods는 주입 컨텍스트에서 실행되므로 내부에서 inject()를 호출해 HttpClient나 라우터 같은 서비스를 가져올 수 있습니다.
withMethods((store, http = inject(HttpClient)) => ({
load() {
http.get<Item[]>('/api/items')
.subscribe(items => patchState(store, { items }));
}
}))기능 순서
기능은 위에서 아래 순서로 조합됩니다. withState를 먼저 배치하고, 상태를 읽는 withComputed를 그다음에 배치한 후, 상태와 계산된 값을 읽는 withMethods를 배치하세요. 순서를 바꾸면 타입 오류가 발생합니다.
캡슐화
컴포넌트는 store.add(item)를 호출하거나 store.total()을 읽습니다. patchState를 직접 호출하지 않으므로 모든 변경 로직이 스토어 내부에 유지됩니다.
순수한 계산과 부수 효과가 있는 메서드
withComputed 함수는 순수하게 유지하세요(값을 도출하는 역할만 수행). HTTP 호출이나 탐색 같은 부수 효과는 withMethods 안에 배치하세요.
메서드 테스트하기
SignalStore는 주입 가능한 클래스입니다. 테스트에서는 TestBed를 통해 스토어를 제공하고, 메서드를 호출한 다음 상태와 계산된 신호를 동기적으로 검증하세요.
const store = TestBed.inject(CartStore);
store.add({ id: '1', price: 10 });
expect(store.count()).toBe(1);
expect(store.total()).toBe(10);빠른 확인
계산된 값과 메서드에 대한 이해도를 확인해 보세요.
복습
withComputed로 메모이제이션된 읽기 모델을 추가하고, withMethods로 patchState와 주입된 서비스를 사용하는 캡슐화된 액션을 추가하여 SignalStore를 확장했습니다. 기능 순서를 지키면 각 계층이 앞에 있는 계층을 읽을 수 있습니다.
자주 묻는 질문
“계산된 상태와 메서드” 강의는 무료인가요?
네 — “계산된 상태와 메서드” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“계산된 상태와 메서드”에서 뭘 배우나요?
파생 상태와 업데이트 메서드를 추가합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“계산된 상태와 메서드” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.