Svelte의 derived

어렵지만 쉬운 derived

 

readable, writable 이 1차 구독변수라면 derived 는 2차 구독변수로 보면 될 것 같다. 상위 구독변수의 변화를 감지해서 값을 알아서 새로 정의해주는 기능이라고 보면 충분할 것 같다.

 

예를 들어

 

const subsc1 = writable("");
const subsc2 = derived(subsc1, $subsc1 => {
    return `derived ${$subsc1}`;
});

이라고 가정할 때

subsc1.set("value01");
console.log("subsc2 value: ", get(subsc2));

subsc1 의 값을 변동한다. subsc2 에는 손을 대지 않아도 콘솔에 값을 직접 찍어보면

subsc2 value: derived value01

와 같이 subsc1 의 값이 대입되는 시점에 이미 자동으로 처리되어있음을 볼 수 있다.