Angular Academy · 강의

linkedSignal과 고급 패턴

종속된 시그널을 반응형으로 조정합니다.

레슨 4/413개 단계

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

linkedSignal이 해결하는 문제

때로는 어떤 원본이 변경될 때 재설정되면서도 쓸 수 있는 상태가 필요합니다. 일반 computed는 읽기 전용이고 일반 신호는 자동으로 재설정되지 않습니다. linkedSignal()은 원본에서 파생되면서 쓸 수 있는 상태를 제공하여 이 간극을 메웁니다.

기본 linkedSignal

계산 함수를 전달합니다. 그 결과는 원본이 변경될 때 다시 계산되면서도 수동으로 설정할 수 있는 쓰기 가능한 신호가 됩니다.

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

const options = signal(['a', 'b', 'c']);
const selected = linkedSignal(() => options()[0]);

selected.set('b');        // manual override
options.set(['x', 'y']);  // resets to 'x'

그냥 signal을 사용하면 안 되나요?

한 번 초기화한 일반 신호는 원본이 변경된 후에도 오래된 값을 유지합니다. linkedSignal은 원본이 변경될 때마다 값을 다시 도출하면서 그 사이에는 값을 쓸 수 있게 합니다.

// Plain signal: stale after options change
// const selected = signal(options()[0]);

// linkedSignal: auto-resets when options changes
const selected = linkedSignal(() => options()[0]);

source/computation 형식

고급 형식에서는 source와 computation을 분리하고 이전 값에도 접근할 수 있습니다. 목록이 업데이트된 후에도 선택 항목이 존재하면 선택을 유지할 때 유용합니다.

const items = signal([{ id: 1 }, { id: 2 }]);

const chosen = linkedSignal({
  source: items,
  computation: (newItems, previous) => {
    const prev = previous?.value;
    const stillThere = newItems.find(i => i.id === prev?.id);
    return stillThere ?? newItems[0];
  }
});

사용자 선택 유지하기

이전 값 패턴을 사용하면 목록이 업데이트된 후에도 사용자의 선택이 존재하는 경우 이를 유지하고, 그렇지 않으면 기본값으로 대체할 수 있습니다. 사용자 경험을 크게 향상하는 방법입니다.

linkedSignal은 쓰기 가능합니다

computed와 달리 linkedSignal에서는 .set()과 .update()를 호출할 수 있습니다. 수동으로 설정한 값은 원본이 다시 변경될 때까지 유지됩니다.

const base = signal(10);
const editable = linkedSignal(() => base());

editable.update(v => v + 5); // 15
base.set(100);               // resets to 100

패턴: 종속 드롭다운

국가 -> 도시: 국가가 변경되면 도시를 선택 가능한 첫 번째 항목으로 재설정하되, 사용자가 다른 항목을 선택할 수 있도록 합니다.

const country = signal('TR');
const cities = computed(() => citiesFor(country()));
const city = linkedSignal(() => cities()[0]);

country.set('US'); // city resets to first US city

패턴: 낙관적 UI 상태

linkedSignal은 서버 데이터에서 도출한 낙관적 값을 보유하면서 UI가 즉시 값을 덮어쓰도록 하고, 최신 데이터가 도착하면 다시 동기화할 수 있습니다.

Effect와 함께 사용하기

Effect로 linkedSignal의 변경에 반응할 수 있습니다. 예를 들어 현재 선택 항목을 저장할 수 있습니다.

const selected = linkedSignal(() => options()[0]);

effect(() => {
  localStorage.setItem('selected', selected());
});

linkedSignal을 사용하지 말아야 할 때

파생 값이 순수하게 읽기 전용이라면 computed()를 사용하세요. 원본에 따라 값을 재설정할 필요가 없다면 일반 signal()을 사용하세요. 쓰기도 가능하고 원본 변경 시 재설정도 가능한 상태가 모두 필요할 때만 linkedSignal을 선택하세요.

고급 반응형 그래프

signal -> computed -> linkedSignal -> effect는 완전한 반응형 파이프라인을 구성합니다. 원시 입력, 순수한 파생 값, 쓰기 가능하고 재설정 가능한 상태, 부수 효과를 모두 수동 구독 없이 처리할 수 있습니다.

빠른 확인

linkedSignal에 대한 이해도를 확인해 보세요.

인터랙티브 레슨에서 답해보세요

복습: linkedSignal과 고급 패턴

linkedSignal()은 소스에 따라 재설정되는 쓰기 가능한 상태를 제공합니다.

사용자 선택을 유지하려면 소스/계산 형식을 사용하세요.
종속 드롭다운과 낙관적 UI에 유용합니다.
읽기 전용 상태에는 computed를, 재설정되지 않는 상태에는 일반 signal을 사용하세요.

Signals 과정을 완료하셨습니다.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 38
레슨: 144

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“linkedSignal과 고급 패턴” 강의는 무료인가요?

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

“linkedSignal과 고급 패턴”에서 뭘 배우나요?

종속된 시그널을 반응형으로 조정합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“linkedSignal과 고급 패턴” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Angular Academy(으)로 돌아가기