0Pricing
Angular Academy · 강의

불변 방식으로 상태 업데이트하기

signal 상태에 불변 업데이트를 적용합니다.

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

불변성이 필요한 이유

신호는 참조로 변경을 감지합니다. 배열이나 객체를 직접 변경하면 참조가 그대로 유지되어 종속된 computed() 신호가 다시 계산되지 않을 수 있습니다. 항상 새로운 참조를 만드십시오.

변경의 함정

기존 배열에 항목을 추가하면 참조를 변경하지 않고 배열 자체를 수정하게 됩니다. 이렇게 하지 마십시오.

// BAD: mutates in place, reference unchanged
this._items.update(list => { list.push(item); return list; });

배열에 전개 연산자 사용하기

전개 연산자를 사용하여 새 배열을 만드십시오. 그러면 참조가 변경되어 소비자가 다시 실행됩니다.

// GOOD: new array reference
this._items.update(list => [...list, item]);

항목 제거하기

새 배열을 반환하고 원본은 변경하지 않는 filter()를 사용하십시오.

removeItem(id: string) {
  this._items.update(list => list.filter(i => i.id !== id));
}

항목 하나 업데이트하기

map()을 사용하여 새 배열을 반환하고, 일치하는 객체를 전개하여 새 복사본을 만드십시오. 그러면 내부 참조도 변경됩니다.

markDone(id: string) {
  this._items.update(list =>
    list.map(i => i.id === id ? { ...i, done: true } : i));
}

객체에 전개 연산자 사용하기

객체 상태에서는 이전 객체를 전개하고 변경된 필드를 덮어쓰십시오. 중첩된 객체도 자체적으로 전개해야 합니다.

private _profile = signal({ name: '', address: { city: '' } });

setCity(city: string) {
  this._profile.update(p => ({ ...p, address: { ...p.address, city } }));
}

새 값과 함께 set 사용하기

상태 전체를 교체할 때 새 객체와 함께 set()을 사용하면 새 참조를 제공하므로 자연스럽게 불변성이 유지됩니다.

reset() {
  this._profile.set({ name: '', address: { city: '' } });
}

computed가 이에 의존하는 이유

계산된 읽기 모델은 신호의 참조에 의존하므로 불변 업데이트를 사용하면 반드시 다시 계산됩니다. 같은 배열 참조를 유지하는 변경은 총합과 필터 결과를 조용히 오래된 상태로 남길 수 있습니다.

도우미 패턴

자주 사용하는 변환을 작은 순수 도우미로 추출하면 저장소 메서드를 읽기 쉽고 일관되게 유지할 수 있습니다.

const upsert = (list: Item[], item: Item) =>
  list.some(i => i.id === item.id)
    ? list.map(i => i.id === item.id ? item : i)
    : [...list, item];

save(item: Item) { this._items.update(l => upsert(l, item)); }

깊은 중첩에 대한 주의

상태가 깊게 중첩되면 많은 전개 연산자가 필요합니다. 업데이트가 복잡해진다면 상태 구조를 평탄화하거나 여러 신호로 분리하여 각 업데이트가 작은 상태 조각만 다루도록 하십시오.

불변성은 디버깅에 도움이 됩니다

각 업데이트가 새로운 참조를 만들기 때문에 시간에 따른 스냅샷을 비교하고, 이전 상태와 다음 상태를 기록하며, 숨겨진 내부 수정에 대해 걱정하지 않고 변경 사항을 추적할 수 있습니다.

빠른 확인

불변 신호 업데이트에 대한 이해도를 확인해 보세요.

복습

배열과 객체에는 스프레드를 사용하고, 수정과 제거에는 map/filter를 사용하며, set을 통해 새로운 참조를 만드는 불변 업데이트 패턴을 배웠습니다. 또한 참조 동일성 때문에 올바른 반응성을 위해 불변성이 필수인 이유도 알아보았습니다.

자주 묻는 질문

“불변 방식으로 상태 업데이트하기” 강의는 무료인가요?

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

“불변 방식으로 상태 업데이트하기”에서 뭘 배우나요?

signal 상태에 불변 업데이트를 적용합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“불변 방식으로 상태 업데이트하기” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. 서비스의 SignalStore
  2. computed로 상태 파생하기
  3. 불변 방식으로 상태 업데이트하기
  4. Signals와 RxJS 연결하기
← Angular Academy(으)로 돌아가기