0Pricing
Angular Academy · 강의

시그널 생성 및 읽기

쓰기 가능한 시그널을 선언하고 값을 읽습니다.

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

시그널 생성

signal() 팩토리에 초기 값을 전달하여 쓰기 가능 시그널을 생성합니다.

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

const c = signal(0); // initial value is 0

초기 값이 타입을 결정합니다

TypeScript는 초기 값에서 시그널 타입을 추론합니다. signal(0)은 WritableSignal<number>입니다.

const name = signal('Alice'); // WritableSignal<string>
const flag = signal(false);    // WritableSignal<boolean>

시그널 읽기

시그널을 호출하여 현재 값을 읽습니다. 저장된 값을 반환하며 반응형 컨텍스트 안에 있다면 종속성을 등록합니다.

const c = signal(0);
const current = c(); // current === 0

여러 번 읽기

원하는 만큼 시그널을 읽을 수 있습니다. 호출할 때마다 호출 시점의 최신 값을 반환합니다.

const c = signal(10);
console.log(c()); // 10
console.log(c()); // 10

명시적 타입 지정

초기 값만으로 타입이 완전히 표현되지 않을 때는 명시적 타입을 지정할 수 있습니다. 예를 들어 null이 될 수도 있는 값이 이에 해당합니다.

const user = signal<string | null>(null);
console.log(user()); // null

객체 시그널

시그널은 객체와 배열을 포함한 모든 값을 보유할 수 있습니다.

const point = signal({ x: 0, y: 0 });
console.log(point().x); // 0

배열 시그널

배열도 같은 방식으로 작동합니다. 읽으면 현재 배열 참조가 반환됩니다.

const items = signal<string[]>(['a', 'b']);
console.log(items().length); // 2

클래스 필드로 사용하는 시그널

컴포넌트와 서비스에서는 시그널을 필드로 선언합니다. 인스턴스가 생성될 때 한 번 초기화됩니다.

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

@Injectable({ providedIn: 'root' })
export class CounterStore {
  count = signal(0);
}

컴포넌트 클래스에서 읽기

클래스 어디에서든, 예를 들어 메서드 안에서도 시그널을 호출하여 읽을 수 있습니다.

export class CounterStore {
  count = signal(0);
  isZero(): boolean {
    return this.count() === 0;
  }
}

읽기 전용 액세스

소비자가 변경할 수 없도록 시그널을 노출하려면 asReadonly() 메서드를 통해 노출할 수 있습니다.

const internal = signal(0);
export const value = internal.asReadonly();
// value() works; value.set is not available

이름 지정 규칙

일반적인 규칙은 시그널이 보유한 값의 이름을 따서 시그널 이름을 지정하는 것입니다(예: count, items). 읽는 방식이 일반적인 접근자처럼 보이기 때문입니다: count().

빠른 확인: 시그널 생성

시그널을 생성하고 읽는 방법을 얼마나 잘 이해했는지 확인해 보세요.

복습: 생성 및 읽기

이제 signal(initialValue)로 쓰기 가능 시그널을 생성하는 방법, TypeScript가 타입을 추론하는 방법, 시그널을 호출하여 읽는 방법을 알고 있습니다. 또한 읽기 전용 액세스를 노출하는 asReadonly()도 살펴보았습니다. 다음 주제는 시그널 값 업데이트입니다.

자주 묻는 질문

“시그널 생성 및 읽기” 강의는 무료인가요?

네 — “시그널 생성 및 읽기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 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 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 시그널이란 무엇인가
  2. 시그널 생성 및 읽기
  3. set 및 update로 시그널 업데이트
  4. 템플릿에서의 시그널
← Angular Academy(으)로 돌아가기