[Angular] Angular 초심자 문법 가이드

| 서론

안녕하세요, 팡일입니다.

 

Angular를 시작하면서 상태는 어떻게 관리할지, 템플릿에서 변수는 어떻게 사용할지, 조건문과 반복문은 어떤 형태로 사용할지에 대해 정리할 필요가 있었습니다.

 

특히나, Angular의 signal, @if, @for 문법이 더 낯설게 느껴지곤 했습니다.

 

그래서 이 글에서는 Angular 최신 문법 기준으로 아래 4가지만 딱 잡고 빠르게 정리해보고자 합니다.

• 상태 관리: signal, computed
• 변수 사용: 컴포넌트 변수 + 템플릿 바인딩
• 조건문: @if, @else
• 반복문: @for, track

 

 

 

| Angular에서 상태(state) 사용하는 방법

1) signal 로 상태 만들기

(1) 상태 생성 : Angular에서는 상태를 signal로 관리합니다.

readonly count = signal(0);

 

(2) 상태 읽기 : 이걸 템플릿에서 사용할 때는 함수처럼 호출합니다.

<p>현재 값: {{ count() }}</p>

 

(3) 상태 변경 : 값을 변경할 때는 set 또는 update를 사용합니다.

increase() {
  this.count.update((v) => v + 1);
}

 

 

2) computed로 파생 상태 만들기

기존 상태를 기반으로 계산된 값을 만들 때는 computed를 사용합니다.

readonly items = signal(['Angular', 'React', 'Vue']);
readonly itemCount = computed(() => this.items().length);

 

템플릿에서는 그대로 사용하면 됩니다.

<p>총 개수: {{ itemCount() }}</p>

 

computed는 자동으로 재계산되며, 상태가 바뀌면 같이 업데이트됩니다. 마치 React의 useMemo 느낌입니다.

 

 

 

 

| Angular에서 변수 사용하는 방법

컴포넌트에 선언한 변수는 템플릿에서 바로 사용할 수 있습니다.

readonly title = '프론트엔드 포트폴리오';
readonly isOpen = signal(true);

<h1>{{ title }}</h1>
<button [disabled]="!isOpen()">저장</button>

 

더 쉽고 간단하게 요약하면 아래와 같습니다.

• {{ }} → 값 출력
• [속성] → 값 바인딩

 

 

또한, 변수를 더 잘 사용하는 방법은 아래와 같습니다.

• 변경 안 되는 값 → readonly
• 계산 로직 → computed로 분리
• 템플릿은 최대한 단순하게 유지

이를 통해 로직은 TS, 화면은 HTML” 이렇게 나누는 게 중요합니다

 

 

 

 

| 조건문 - @if

Angular 최신 문법에서는 구 방식인 *ngIf 대신 @if를 사용합니다.

@if (isOpen()) {
  <p>열려 있음</p>
} @else {
  <p>닫혀 있음</p>
}

 

여러 조건도 가능합니다.

@if (score >= 90) {
  <p>A</p>
} @else if (score >= 80) {
  <p>B</p>
} @else {
  <p>C</p>
}

 

 

 

 

| 반복문 - @for

리스트(배열) 데이터를 화면에 반복해서 보여줄 때는 @for를 사용합니다.

 

예를 들어 이런 데이터가 있다고 해볼게요.

readonly projects = signal([
  { id: 1, name: '포트폴리오' },
  { id: 2, name: '블로그' },
]);

 

이걸 화면에 출력하면 이렇게 됩니다.

<ul>
  @for (project of projects(); track project.id) {
    <li>{{ project.name }}</li>
  }
</ul>

 

 

 

1) 가장 중요한 포인트: track

track project.id

 

이건 꼭 이해하고 넘어가야 합니다.

 

Angular는 리스트를 다시 그릴 때 “어떤 데이터가 바뀌었는지” 알아야 하는데, 그걸 판단하는 기준이 바로 track입니다.

 

 

2) 추가 기능: 반복문 안에서 사용할 수 있는 값

 

반복문 안에서는 몇 가지 유용한 변수를 사용할 수 있습니다. (여기서 i는 index입니다.)

@for (item of items(); let i = $index) {
  <p>{{ i }}</p>
}

 

사용 가능한 값들은 아래와 같습니다.

• $index → 현재 위치 (0, 1, 2…)
• $first → 첫 번째 요소인지 (true/false)
• $last → 마지막 요소인지

@for (item of items(); let i = $index; let isFirst = $first) {
  <p>
    {{ i }}번째
    @if (isFirst) { (첫 번째) }
  </p>
}

 

 

 

| 조건문 + 반복문 실전 패턴

아래의 예시는 실무에서 가장 많이 쓰는 구조입니다.

@if (projects().length === 0) {
  <p>데이터 없음</p>
} @else {
  <ul>
    @for (project of projects(); track project.id) {
      <li>{{ project.name }}</li>
    }
  </ul>
}

• 데이터 없으면 Empty UI
• 있으면 리스트 UI

 

 

 

| 결론

Angular를 처음 배울 때는 문법이 낯설어서 어렵게 느껴질 수 있지만, 실제로는 구조가 꽤 일관되어 있습니다.

 

특히 아래 4가지만 익히면 기본적인 화면 구성은 거의 다 만들 수 있습니다.

• 상태 → signal
• 파생값 → computed
• 조건 → @if
• 반복 → @for + track

 

더 나아가서, (click), [value], (input) 같은 이벤트 바인딩까지 연결하면 거의 “실전 개발 가능한 수준”까지 올라갑니다.