Angular Signals๋ Angular ์ฑ์ ์ํ ๊ด๋ฆฌ๋ฅผ ํ์ ํ ์๋ก์ด ์ธ๋ถํ๋ ๋ฐ์ํ ์์คํ ์ ๋๋ค. ๊ฐ๋ฐ์ ๋จ์ํํ๊ณ ์ฑ๋ฅ์ ํฅ์์ํค๋ฉฐ ๋์ UI ๊ตฌ์ถ์ ํ๋์ ์ธ ์ ๊ทผ๋ฒ์ ์ ๊ณตํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์.
Angular Signals: ์ํ ๊ด๋ฆฌ์ ๋ฏธ๋
Angular๋ ๋ณต์กํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ธฐ ์ํ ํญ์ ๊ฐ๋ ฅํ ํ๋ ์์ํฌ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์ํ๋ฅผ ํจ์จ์ ์ด๊ณ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๊ฒ์ ์ข ์ข ์ด๋ ค์์ ์ด๋ํ์ต๋๋ค. Signals์ ๋์ ์ผ๋ก Angular๋ ๋ฐ์ํ์ ๋ํ ๋ ๊ฐ์ํ๋๊ณ ์ฑ๋ฅ์ด ํฅ์๋ ์ ๊ทผ ๋ฐฉ์์ ํฅํด ์ค์ํ ๋ฐ๊ฑธ์์ ๋ด๋๊ณ ์์ต๋๋ค. ์ด ์ข ํฉ ๊ฐ์ด๋๋ Angular Signals๊ฐ ๋ฌด์์ธ์ง, ์ด๋ป๊ฒ ์๋ํ๋์ง, ๊ทธ๋ฆฌ๊ณ ์ Angular ์ํ ๊ด๋ฆฌ์ ๋ฏธ๋๋ฅผ ๋ํํ๋์ง ์ดํด๋ด ๋๋ค.
Angular Signals๋ ๋ฌด์์ธ๊ฐ์?
ํต์ฌ์ ์ผ๋ก Angular Signals๋ ์ธ๋ถํ๋ ๋ฐ์ํ ์์คํ ์ ๋๋ค. ๊ด๋ฒ์ํ ์ปดํฌ๋ํธ ์์ค ๋ณ๊ฒฝ์ ๊ธฐ๋ฐ์ผ๋ก ์ฌ๋ ๋๋ง์ ์์ฃผ ํธ๋ฆฌ๊ฑฐํ๋ Angular์ ๊ธฐ์กด ๋ณ๊ฒฝ ๊ฐ์ง ๋ฉ์ปค๋์ฆ๊ณผ ๋ฌ๋ฆฌ, Signals๋ ๊ฐ๋ณ ๋ฐ์ดํฐ ํฌ์ธํธ๋ฅผ ์ ๋ฐํ๊ฒ ์ถ์ ํ๊ณ ์ ๋ฐ์ดํธํ ์ ์์ต๋๋ค. ๋ณธ์ง์ ์ผ๋ก Signal์ ๊ฐ์ด ๋ณ๊ฒฝ๋ ๋ ๊ด์ฌ ์๋ ์๋น์์๊ฒ ์๋ฆฌ๋ ๊ฐ์ ๋ํ ๋ํผ์ ๋๋ค. ์ด๋ ํนํ ํฌ๊ณ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ ํจ์จ์ ์ธ ์ ๋ฐ์ดํธ์ ํฅ์๋ ์ฑ๋ฅ์ผ๋ก ์ด์ด์ง๋๋ค.
Signals๋ฅผ ๊ธฐ๋ณธ ๊ฐ์ด ๋ณ๊ฒฝ๋ ๋๋ง ์๋์ผ๋ก ์ ๋ฐ์ดํธ๋ฅผ ํธ๋ฆฌ๊ฑฐํ๋ ์ค๋งํธ ๋ณ์๋ผ๊ณ ์๊ฐํ์ธ์. ์ด๋ UI์ ์์ ๋ถ๋ถ๋ง ์๋ก ๊ณ ์นจํด์ผ ํ๋ ๊ฒฝ์ฐ์๋ ๋ณ๊ฒฝ ์ฌํญ์ด ์ผ๋ จ์ ์ฐ์์ ์ธ ์ ๋ฐ์ดํธ๋ฅผ ํธ๋ฆฌ๊ฑฐํ ์ ์๋ ๊ธฐ์กด Angular ๋ณ๊ฒฝ ๊ฐ์ง ์ ๋ต๊ณผ๋ ์๋นํ ๋ค๋ฆ ๋๋ค.
Angular Signals์ ์ฃผ์ ๊ฐ๋
Signals๊ฐ ์ด๋ป๊ฒ ์๋ํ๋์ง ์ดํดํ๋ ค๋ฉด ๋ช ๊ฐ์ง ์ฃผ์ ๊ฐ๋ ์ ํ์ ํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค:
- Signal: Signal์ ์ฝ๊ณ ์ธ ์ ์๋ ๊ฐ์ ๋ณด์ ํฉ๋๋ค. ๊ฐ์ด ๋ณ๊ฒฝ๋๋ฉด ์ข ์๋ ๊ณ์ฐ ๋๋ ํจ๊ณผ์ ์๋์ผ๋ก ์๋ฆผ์ด ์ ์ก๋ฉ๋๋ค.
- ์ฐ๊ธฐ ๊ฐ๋ฅํ Signal (Writable Signal): ๊ธฐ๋ณธ ๊ฐ์ ์ฝ๊ณ ์ธ ์ ์๋ Signal ์ ํ์ ๋๋ค. ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ํ ๊ด๋ฆฌ์ ์ฌ์ฉ๋๋ ๊ฐ์ฅ ์ผ๋ฐ์ ์ธ Signal ์ ํ์ ๋๋ค.
- ๊ณ์ฐ๋ Signal (Computed Signal): ํ๋ ์ด์์ ๋ค๋ฅธ Signal์์ ํ์๋ ๊ฐ์ ๊ฐ์ง๋ Signal์ ๋๋ค. ์์ค Signal ์ค ํ๋๋ผ๋ ๋ณ๊ฒฝ๋๋ฉด ๊ณ์ฐ๋ Signal์ ์๋์ผ๋ก ๋ค์ ํ๊ฐ๋ฉ๋๋ค. ์ด๋ ํ์๋ ์ํ๋ฅผ ๋์ถํ๊ณ ๊ด๋ฆฌํ๋ ๊ฐ๋ ฅํ ๋ฉ์ปค๋์ฆ์ ๋๋ค.
- ํจ๊ณผ (Effect): ํ๋ ์ด์์ Signal์ด ๋ณ๊ฒฝ๋ ๋๋ง๋ค ์คํ๋๋ ๋ถ์ ํจ๊ณผ์ ๋๋ค. ํจ๊ณผ๋ ์ผ๋ฐ์ ์ผ๋ก DOM ์ ๋ฐ์ดํธ, API ํธ์ถ ๋๋ ๋ฐ์ดํฐ ๋ก๊น ๊ณผ ๊ฐ์ ์์ ์ ์ํํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
- ์ธ์ ํฐ ์ปจํ ์คํธ (Injector Context): Signal๊ณผ ํจ๊ณผ๋ฅผ ์์ฑํ๋ ค๋ฉด ์ธ์ ํฐ ์ปจํ ์คํธ๊ฐ ํ์ํฉ๋๋ค. ์ด๋ ์ปดํฌ๋ํธ, ์๋น์ค ๋๋ ๊ธฐํ ์ฃผ์ ๊ฐ๋ฅํ ํญ๋ชฉ์ ์ํด ์ ๊ณต๋ ์ ์์ต๋๋ค.
Angular Signals ์ฌ์ฉ์ ์ด์
Angular Signals๋ ์ํ ๊ด๋ฆฌ๋ฅผ ์ํ ๋งค๋ ฅ์ ์ธ ์ ํ์ง๊ฐ ๋๋ ๋ช ๊ฐ์ง ์ฃผ์ ์ด์ ์ ์ ๊ณตํฉ๋๋ค:
1. ํฅ์๋ ์ฑ๋ฅ
Signals๋ ์ธ๋ถํ๋ ๋ฐ์ํ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ์ด๋ ๋ณ๊ฒฝ๋ Signal์ ์์กดํ๋ UI ๋ถ๋ถ๋ง ์ ๋ฐ์ดํธ๋๋ค๋ ์๋ฏธ์ ๋๋ค. ์ด๋ ๋ถํ์ํ ์ฌ๋ ๋๋ง์ ํฌ๊ฒ ์ค์ด๊ณ ์ ๋ฐ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค. ์ฌ๋ฌ ์์ ฏ์ด ์๋ ๋ณต์กํ ๋์๋ณด๋๋ฅผ ์์ํด ๋ณด์ธ์. Signals๋ฅผ ์ฌ์ฉํ๋ฉด ํ๋์ ์์ ฏ์ ์ ๋ฐ์ดํธํด๋ ์ ์ฒด ๋์๋ณด๋๊ฐ ์ฌ๋ ๋๋ง๋์ง ์๊ณ , ์ ๋ฐ์ดํธํด์ผ ํ๋ ํน์ ์์ ฏ๋ง ์ฌ๋ ๋๋ง๋ฉ๋๋ค.
2. ๊ฐ์ํ๋ ์ํ ๊ด๋ฆฌ
Signals๋ RxJS Observables์ ๊ฐ์ ์ ํต์ ์ธ ๋ฐฉ๋ฒ์ ๋นํด ์ํ๋ฅผ ๊ด๋ฆฌํ๋ ๋ ๊ฐ๋จํ๊ณ ์ง๊ด์ ์ธ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. Signals์ ๋ฐ์ํ ํน์ฑ์ ๊ฐ๋ฐ์๊ฐ ์ํ ๋ณ๊ฒฝ์ ๋ํด ๋ ์ฝ๊ฒ ์ถ๋ก ํ๊ณ ๋ ์์ธก ๊ฐ๋ฅํ ์ฝ๋๋ฅผ ์์ฑํ ์ ์๋๋ก ํฉ๋๋ค. ์ด๋ ์์ฉ๊ตฌ๋ฅผ ์ค์ด๊ณ ์ฝ๋๋ฒ ์ด์ค๋ฅผ ์ ์ง ๊ด๋ฆฌํ๊ธฐ ์ฝ๊ฒ ๋ง๋ญ๋๋ค.
3. ํฅ์๋ ๋๋ฒ๊น
Signals์ ๋ช ์์ ์ธ ํน์ฑ ๋๋ถ์ ๋ฐ์ดํฐ ํ๋ฆ์ ์ถ์ ํ๊ณ ์ํ ๋ณ๊ฒฝ์ด ์ ํ๋ฆฌ์ผ์ด์ ์ ํตํด ์ด๋ป๊ฒ ์ ํ๋๋์ง ์ดํดํ๊ธฐ๊ฐ ๋ ์ฝ์ต๋๋ค. ์ด๋ ๋๋ฒ๊น ์ ํฌ๊ฒ ๋จ์ํํ๊ณ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ๋ ๋น ๋ฅด๊ฒ ์๋ณํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
4. ์์ฉ๊ตฌ ์ฝ๋ ๊ฐ์
Signals๋ ์ ํต์ ์ธ ๋ฐ์ํ ํ๋ก๊ทธ๋๋ฐ ํจํด๊ณผ ๊ด๋ จ๋ ๋ง์ ์์ฉ๊ตฌ ์ฝ๋๋ฅผ ์ ๊ฑฐํฉ๋๋ค. ์ด๋ ๋ ๊น๋ํ๊ณ ๊ฐ๊ฒฐํ๋ฉฐ ์ฝ๊ณ ์ ์ง ๊ด๋ฆฌํ๊ธฐ ์ฌ์ด ์ฝ๋๋ฅผ ๋ง๋ญ๋๋ค.
5. Angular์์ ์ํํ ํตํฉ
Signals๋ Angular ํ๋ ์์ํฌ์ ์ํํ๊ฒ ํตํฉ๋๋๋ก ์ค๊ณ๋์์ต๋๋ค. ๊ธฐ์กด Angular ๊ธฐ๋ฅ ๋ฐ ํจํด๊ณผ ์ ์๋ํ๋ฏ๋ก ๊ธฐ์กด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฝ๊ฒ ์ฑํํ ์ ์์ต๋๋ค. Signals์ ์ด์ ์ ์ป๊ธฐ ์ํด ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค์ ์์ฑํ ํ์๊ฐ ์์ต๋๋ค. ํ์์ ๋ฐ๋ผ ์ ์ง์ ์ผ๋ก ๋์ ํ ์ ์์ต๋๋ค.
Angular Signals ์ฌ์ฉ๋ฒ: ์ค์ ์์
์ ํ๋ฆฌ์ผ์ด์ ์์ Angular Signals๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ํ ๋ช ๊ฐ์ง ์ค์ ์์ ๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
์์ 1: ๊ฐ๋จํ ์นด์ดํฐ
์ด ์์ ๋ Signals๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ๋จํ ์นด์ดํฐ๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค.
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-counter',
template: `
<p>Count: {{ count() }}</p>
<button (click)="increment()">Increment</button>
`,
})
export class CounterComponent {
count = signal(0);
increment() {
this.count.update(value => value + 1);
}
}
์ด ์์ ์์ count๋ ํ์ฌ ์นด์ดํฐ ๊ฐ์ ์ ์ฅํ๋ Signal์
๋๋ค. increment() ๋ฉ์๋๋ update() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ์ ์
๋ฐ์ดํธํฉ๋๋ค. ํ
ํ๋ฆฟ์ count() ์ ๊ทผ์๋ฅผ ์ฌ์ฉํ์ฌ ํ์ฌ ๊ฐ์ ํ์ํ๋ฉฐ, ์ด๋ Signal์ ์๋์ผ๋ก ์ถ์ ํ๊ณ ๊ฐ์ด ๋ณ๊ฒฝ๋ ๋ UI๋ฅผ ์
๋ฐ์ดํธํฉ๋๋ค.
์์ 2: ํ์๋ ์ํ๋ฅผ ์ํ ๊ณ์ฐ๋ Signal
์ด ์์ ๋ ๋ค๋ฅธ Signal์์ ๊ฐ์ ํ์ํ๋ ๊ณ์ฐ๋ Signal์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค.
import { Component, signal, computed } from '@angular/core';
@Component({
selector: 'app-greeting',
template: `
<p>Greeting: {{ greeting() }}</p>
<input type="text" [(ngModel)]="name">
`,
})
export class GreetingComponent {
name = '';
nameSignal = signal(this.name);
greeting = computed(() => `Hello, ${this.nameSignal()}!`);
ngDoCheck() {
if (this.nameSignal() !== this.name) {
this.nameSignal.set(this.name);
}
}
}
์ด ์์ ์์ nameSignal์ ์ฌ์ฉ์๊ฐ ์
๋ ฅํ ์ด๋ฆ์ ์ ์ฅํฉ๋๋ค. greeting Signal์ nameSignal์์ ๊ฐ์ ํ์ํ๋ ๊ณ์ฐ๋ Signal์
๋๋ค. nameSignal์ด ๋ณ๊ฒฝ๋ ๋๋ง๋ค greeting Signal์ ์๋์ผ๋ก ๋ค์ ํ๊ฐ๋๊ณ UI๊ฐ ๊ทธ์ ๋ฐ๋ผ ์
๋ฐ์ดํธ๋ฉ๋๋ค.
์์ 3: ๋ถ์ ํจ๊ณผ๋ฅผ ์ํ Effects ์ฌ์ฉ
์ด ์์ ๋ Signal์ด ๋ณ๊ฒฝ๋ ๋ ๋ถ์ ํจ๊ณผ๋ฅผ ์ํํ๊ธฐ ์ํด Effects๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค.
import { Component, signal, effect } from '@angular/core';
@Component({
selector: 'app-logger',
template: `
<p>Value: {{ value() }}</p>
<button (click)="increment()">Increment</button>
`,
})
export class LoggerComponent {
value = signal(0);
constructor() {
effect(() => {
console.log(`Value changed: ${this.value()}`);
});
}
increment() {
this.value.update(v => v + 1);
}
}
์ด ์์ ์์ effect() ํจ์๋ value Signal์ ๊ฐ์ด ๋ณ๊ฒฝ๋ ๋๋ง๋ค ๊ฐ์ ๋ก๊ทธํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ์ด๋ ๊ฐ๋จํ ์์ ์ด์ง๋ง, Effects๋ API ํธ์ถ ๋๋ DOM ์
๋ฐ์ดํธ์ ๊ฐ์ ๋ ๋ณต์กํ ๋ถ์ ํจ๊ณผ๋ฅผ ์ํํ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ต๋๋ค.
Signals vs. Observables: ์ฃผ์ ์ฐจ์ด์
Signals์ Observables๋ ๋ชจ๋ ๋ฐ์ํ ํ๋ก๊ทธ๋๋ฐ ๊ตฌ์ฑ ์์์ด์ง๋ง, ๋ ์ฌ์ด์๋ ๋ช ๊ฐ์ง ์ฃผ์ ์ฐจ์ด์ ์ด ์์ต๋๋ค:
- ์ธ๋ถ์ฑ (Granularity): Signals๋ ์ธ๋ถํ๋ ๋ฐ์ํ์ ์ ๊ณตํ๋ ๋ฐ๋ฉด, Observables๋ ์ผ๋ฐ์ ์ผ๋ก ๋ ๋์ ์์ค์์ ์๋ํฉ๋๋ค.
- ๋ณ๊ฒฝ ๊ฐ์ง (Change Detection): Signals๋ Angular์ ๋ณ๊ฒฝ ๊ฐ์ง ์์คํ ๊ณผ ์ง์ ํตํฉ๋๋ ๋ฐ๋ฉด, Observables๋ ์ข ์ข ์๋ ๋ณ๊ฒฝ ๊ฐ์ง ํธ๋ฆฌ๊ฑฐ๋ฅผ ํ์๋ก ํฉ๋๋ค.
- ๋ณต์ก์ฑ (Complexity): Signals๋ ํนํ ๊ธฐ๋ณธ์ ์ธ ์ํ ๊ด๋ฆฌ ์์ ์ ๊ฒฝ์ฐ Observables๋ณด๋ค ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉํ๊ณ ์ดํดํ๊ธฐ๊ฐ ๋ ๊ฐ๋จํฉ๋๋ค.
- ์ฑ๋ฅ (Performance): Signals๋ ์ธ๋ถํ๋ ๋ฐ์ํ์ด ์ค์ํ ์๋๋ฆฌ์ค์์ ๋ ๋์ ์ฑ๋ฅ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
- ์ฌ์ฉ ์ฌ๋ก (Use Cases): Observables๋ ์ฌ์ ํ ๋น๋๊ธฐ ์์ ๋ฐ ๋ณต์กํ ๋ฐ์ดํฐ ์คํธ๋ฆผ์ ์ฒ๋ฆฌํ๊ธฐ ์ํ ๊ฐ๋ ฅํ ๋๊ตฌ์ธ ๋ฐ๋ฉด, Signals๋ ์ปดํฌ๋ํธ ๋ด์์ ๋๊ธฐ ์ํ๋ฅผ ๊ด๋ฆฌํ๋ ๋ฐ ๋ ์ ํฉํฉ๋๋ค.
๋ง์ ๊ฒฝ์ฐ์ Signals์ Observables๋ ํจ๊ป ์ฌ์ฉํ์ฌ ๊ฒฌ๊ณ ํ๊ณ ์ฑ๋ฅ์ด ๋ฐ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, Observables๋ฅผ ์ฌ์ฉํ์ฌ API์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์จ ๋ค์ Signals๋ฅผ ์ฌ์ฉํ์ฌ ์ปดํฌ๋ํธ ๋ด์์ ํด๋น ๋ฐ์ดํฐ์ ์ํ๋ฅผ ๊ด๋ฆฌํ ์ ์์ต๋๋ค.
ํ๋ก์ ํธ์ Angular Signals ๋์ ํ๊ธฐ
Angular Signals๋ก ๋ง์ด๊ทธ๋ ์ด์ ํ๋ ๊ฒ์ ์ ์ง์ ์ธ ๊ณผ์ ์ด ๋ ์ ์์ต๋๋ค. ๋ค์์ ๊ถ์ฅ๋๋ ์ ๊ทผ ๋ฐฉ์์ ๋๋ค:
- ์๊ฒ ์์ํ๊ธฐ: ์๋ก์ด ์ปดํฌ๋ํธ๋ ๊ธฐ๋ฅ์ Signals๋ฅผ ๋์ ํ๋ ๊ฒ๋ถํฐ ์์ํ์ธ์.
- ๊ธฐ์กด ์ฝ๋ ๋ฆฌํฉํ ๋ง: ์ ์ ํ ๊ฒฝ์ฐ ๊ธฐ์กด ์ปดํฌ๋ํธ๋ฅผ Signals๋ฅผ ์ฌ์ฉํ๋๋ก ์ ์ง์ ์ผ๋ก ๋ฆฌํฉํ ๋งํ์ธ์.
- Signals์ Observables ํจ๊ป ์ฌ์ฉํ๊ธฐ: Observables๋ฅผ ์์ ํ ํฌ๊ธฐํด์ผ ํ๋ค๊ณ ์๊ฐํ์ง ๋ง์ธ์. ์๋ฏธ๊ฐ ์๋ ๊ณณ์ ์ฌ์ฉํ๊ณ , ๋๊ธฐ ์ํ ๊ด๋ฆฌ๋ฅผ ์ํด Signals๋ฅผ ์ฌ์ฉํ์ธ์.
- ์ฑ๋ฅ ๊ณ ๋ ค: Signals ์ฌ์ฉ์ ์ฑ๋ฅ ์ํฅ์ ํ๊ฐํ๊ณ ๊ทธ์ ๋ฐ๋ผ ์ฝ๋๋ฅผ ์กฐ์ ํ์ธ์.
Angular Signals ์ฌ์ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
Angular Signals๋ฅผ ์ต๋ํ ํ์ฉํ๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด์ธ์:
- ์ง์ญ ์ปดํฌ๋ํธ ์ํ์ Signals ์ฌ์ฉ: Signals๋ ๊ฐ๋ณ ์ปดํฌ๋ํธ ๋ด์์ ์ํ๋ฅผ ๊ด๋ฆฌํ๋ ๋ฐ ๊ฐ์ฅ ์ ํฉํฉ๋๋ค.
- Effects ๊ณผ๋ํ ์ฌ์ฉ ํผํ๊ธฐ: Effects๋ ๋ฐ์ดํฐ ํ๋ฆ์ ์ถ๋ก ํ๊ธฐ ์ด๋ ต๊ฒ ๋ง๋ค ์ ์์ผ๋ฏ๋ก ๋๋ฌผ๊ฒ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
- ๊ณ์ฐ๋ Signal์ ๋จ์ํ๊ฒ ์ ์ง: ๋ณต์กํ ๊ณ์ฐ๋ Signal์ ์ฑ๋ฅ์ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค.
- Signals ํ ์คํธ: Signals๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํ๋์ง ํ์ธํ๊ธฐ ์ํด ๋จ์ ํ ์คํธ๋ฅผ ์์ฑํ์ธ์.
- ๋ถ๋ณ์ฑ ๊ณ ๋ ค: Signals ์์ฒด๋ ๊ฐ๋ณ์ ์ด์ง๋ง, ์ํ ๊ด๋ฆฌ๋ฅผ ๋จ์ํํ๊ณ ์ฑ๋ฅ์ ํฅ์์ํค๊ธฐ ์ํด ๋ถ๋ณ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
Angular ์ํ ๊ด๋ฆฌ์ ๋ฏธ๋
Angular Signals๋ Angular์์ ์ํ ๊ด๋ฆฌ์ ๋ฐ์ ์ ์์ด ์ค์ํ ์ง์ ์ ๋ํ๋ ๋๋ค. ๋ณด๋ค ์ธ๋ถํ๋๊ณ ํจ์จ์ ์ธ ๋ฐ์ํ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํจ์ผ๋ก์จ Signals๋ Angular ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ๊ณผ ์ ์ง ๊ด๋ฆฌ์ฑ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์ฌ๋ ฅ์ ๊ฐ์ง๊ณ ์์ต๋๋ค. Angular ์ปค๋ฎค๋ํฐ๊ฐ Signals๋ฅผ ๊ณ์ ์์ฉํจ์ ๋ฐ๋ผ, ๋์ฑ ํ์ ์ ์ธ ์ฌ์ฉ ์ฌ๋ก์ ๋ชจ๋ฒ ์ฌ๋ก๊ฐ ๋ํ๋ ๊ฒ์ผ๋ก ์์๋ฉ๋๋ค. Signals๋ก์ ์ ํ์ Angular๊ฐ ์น ๊ฐ๋ฐ์ ์ ๋์ ๋จธ๋ฌด๋ฅด๊ณ ์ ์ธ๊ณ ์ฌ์ฉ์๋ค์ ์ํด ํ๋์ ์ด๊ณ ๊ณ ์ฑ๋ฅ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ํ์ํ ๋๊ตฌ๋ฅผ ๊ฐ๋ฐ์์๊ฒ ์ ๊ณตํ๋ ค๋ Angular์ ๋ ธ๋ ฅ์ ๊ฐ์กฐํฉ๋๋ค.
๊ฒฐ๋ก
Angular Signals๋ Angular ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ํ๋ฅผ ๊ด๋ฆฌํ๊ธฐ ์ํ ๊ฐ๋ ฅํ ์๋ก์ด ๋๊ตฌ์ ๋๋ค. ์ด ๊ฐ์ด๋์ ์ค๋ช ๋ ์ฃผ์ ๊ฐ๋ ๊ณผ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ดํดํจ์ผ๋ก์จ, Signals๋ฅผ ํ์ฉํ์ฌ ๋ ์ฑ๋ฅ์ด ๋ฐ์ด๋๊ณ ์ ์ง ๊ด๋ฆฌํ๊ธฐ ์ฌ์ฐ๋ฉฐ ํ์ฅ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ์ ์์ต๋๋ค. Angular ์ํ ๊ด๋ฆฌ์ ๋ฏธ๋๋ฅผ ๋ฐ์๋ค์ด๊ณ Signals๊ฐ ์ ๊ณตํ๋ ๊ฐ๋ฅ์ฑ์ ํ์ํ๊ธฐ ์์ํ์ธ์.