지시자란 무엇인가? ngIf와 ngFor 사용해 보기 & 기초 지시자를 통해 화면에 조건과 반복 적용하기 (Angular 16 기준)

서론

Angular 16에서 지시자(Directive)는 HTML 요소의 동작을 변경하거나 스타일을 제어하는 강력한 기능을 제공합니다. 지시자는 HTML 요소에 특별한 속성을 추가해 요소의 스타일과 구조를 동적으로 제어할 수 있도록 하며, 코드의 재사용성과 관리 효율성을 크게 높여줍니다. 이번 글에서는 지시자의 개념을 소개하고 ngIf와 ngFor를 사용한 조건부 렌더링과 반복 렌더링을 구현하는 방법을 알아보겠습니다.

본론

1. 지시자란 무엇인가?

지시자의 개념

지시자는 Angular 템플릿에서 HTML 요소의 속성이나 동작을 변경하거나 조건에 따라 요소를 추가 및 제거할 수 있게 도와주는 역할을 합니다. 지시자는 Angular가 동적이고 상호작용적인 사용자 인터페이스를 구현할 수 있게 해주며, 기본적인 기능을 갖춘 템플릿에 동적인 요소를 추가할 때 유용합니다.

지시자의 종류

Angular 16에서는 주로 세 가지 유형의 지시자를 제공합니다:

구조 지시자 (Structural Directive): DOM 요소의 구조를 제어하여, 요소의 생성, 제거 등을 관리합니다. 예: *ngIf, *ngFor.
속성 지시자 (Attribute Directive): DOM 요소의 속성을 동적으로 변경하여, 요소의 스타일이나 동작을 제어합니다. 예: ngStyle, ngClass.
컴포넌트 (Component): 컴포넌트 자체도 일종의 지시자로, DOM에 템플릿을 삽입합니다.

2. ngIf와 ngFor를 사용한 기본 지시자 실습

Angular의 기본 구조 지시자인 *ngIf와 *ngFor를 통해 조건부 렌더링과 반복 렌더링을 직접 구현해보겠습니다.

1) ngIf를 사용한 조건부 렌더링

*ngIf는 조건에 따라 요소를 DOM에 삽입하거나 제거하는 구조 지시자입니다. 예를 들어, 특정 조건이 참일 때만 UI 요소를 표시하거나, 조건이 거짓이면 요소를 숨기는 등 다양한 용도로 활용할 수 있습니다.

ngIf 사용 예제

아래 예제에서는 isLoggedIn 변수를 통해 로그인 상태를 나타내고, 이 변수의 값에 따라 특정 메시지를 표시할지 결정합니다.

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isLoggedIn: boolean = false;

  toggleLogin() {
    this.isLoggedIn = !this.isLoggedIn;
  }
}

<!-- app.component.html -->
<div>
  <p *ngIf="isLoggedIn; else loggedOutTemplate">환영합니다! 로그인 상태입니다.</p>
  <ng-template #loggedOutTemplate>
    <p>로그아웃 상태입니다. 로그인해주세요.</p>
  </ng-template>
  <button (click)="toggleLogin()">로그인 상태 변경</button>
</div>

*ngIf="isLoggedIn": isLoggedIn이 true일 때만 메시지를 표시하고, false일 경우 ng-template로 정의한 대체 템플릿을 표시합니다.
ng-template: *ngIf가 거짓일 때 표시할 대체 콘텐츠를 정의합니다.

결과: 초기 상태에서는 "로그아웃 상태입니다. 로그인해주세요."가 표시됩니다. 버튼을 클릭하여 isLoggedIn 값을 true로 변경하면 "환영합니다! 로그인 상태입니다."라는 메시지로 변경됩니다.

2) ngFor를 사용한 반복 렌더링

*ngFor는 리스트나 배열의 요소를 반복하여 화면에 출력하는 구조 지시자로, 주로 데이터가 배열 형태로 관리될 때 사용됩니다. *ngFor를 사용하면 배열의 각 요소에 대해 반복적으로 HTML 요소를 렌더링할 수 있습니다.

ngFor 사용 예제

아래 예제에서는 users라는 배열을 생성하고, *ngFor를 사용해 배열의 각 항목을 화면에 렌더링합니다.

// app.component.ts
export class AppComponent {
  users: string[] = ["Alice", "Bob", "Charlie", "David"];
}

<!-- app.component.html -->
<div>
  <h2>사용자 목록</h2>
  <ul>
    <li *ngFor="let user of users">{{ user }}</li>
  </ul>
</div>

*ngFor="let user of users": users 배열의 각 항목을 반복하여 user 변수로 참조합니다.
{{ user }}: 반복 중인 현재 항목의 값을 표시합니다.

결과: 사용자 목록이 다음과 같이 표시됩니다.

Alice
Bob
Charlie
David

3) ngIf와 ngFor를 함께 사용하기

*ngIf와 *ngFor를 함께 사용하여 조건에 따라 리스트를 표시하거나 숨길 수 있습니다. 아래 예제에서는 배열이 비어있을 때는 "사용자가 없습니다."라는 메시지를 표시하고, 데이터가 존재할 때만 리스트를 출력하도록 구성해보겠습니다.

// app.component.ts
export class AppComponent {
  users: string[] = ["Alice", "Bob", "Charlie", "David"];

  clearUsers() {
    this.users = [];
  }
}

<!-- app.component.html -->
<div>
  <h2>사용자 목록</h2>
  <button (click)="clearUsers()">사용자 목록 지우기</button>
  <p *ngIf="users.length === 0">사용자가 없습니다.</p>
  <ul *ngIf="users.length > 0">
    <li *ngFor="let user of users">{{ user }}</li>
  </ul>
</div>

users.length === 0: 배열이 비어있는지 확인하여 "사용자가 없습니다." 메시지를 표시합니다.
*ngFor와 *ngIf의 조합: 배열에 요소가 있으면 *ngFor를 통해 목록을 출력하고, 요소가 없으면 *ngIf 조건에 따라 다른 메시지를 표시합니다.

결과: 초기 상태에서는 사용자 목록이 표시되고, "사용자 목록 지우기" 버튼을 클릭하면 users 배열이 비워져 "사용자가 없습니다." 메시지가 나타납니다.

결론

이번 글에서는 Angular 16의 지시자 개념과 ngIf 및 ngFor를 활용한 조건부 및 반복 렌더링을 다루었습니다. 지시자는 Angular의 템플릿에서 DOM 요소의 동작을 제어하는 강력한 도구로, 지시자를 사용하면 HTML을 조건에 맞춰 동적으로 렌더링하거나 배열의 데이터를 쉽게 반복해 표시할 수 있습니다. 앞으로 지시자를 활용해 다양한 UI 요소와 상호작용하는 Angular 애플리케이션을 만들어보세요.

Q&A 섹션

Q1: ngIf와 ngFor는 HTML에서만 사용할 수 있나요?
A1: Angular의 구조 지시자는 템플릿에서만 사용됩니다. TypeScript 코드에서는 조건문이나 반복문을 사용해 요소를 제어할 수 있지만, 템플릿에서 *ngIf와 *ngFor를 사용하는 것이 효율적입니다.
Q2: ng-template은 무엇인가요?
A2: ng-template은 Angular에서 *ngIf와 같은 구조 지시자와 함께 사용하여, 조건이 맞지 않을 때 대체 콘텐츠를 정의하는 데 사용됩니다. HTML에 직접 표시되지 않으며 조건에 따라 동적으로 렌더링됩니다.
Q3: ngFor에서의 let user of users; let i = index는 어떤 의미인가요?
A3: let i = index는 users 배열의 현재 인덱스를 i 변수에 저장해 반복 중에 접근할 수 있게 해줍니다. 이를 활용해 각 요소의 인덱스를 표시하거나 특정 조건에 따라 스타일을 변경할 수 있습니다.

8일차: Angular 16 Angular의 라우팅과 네비게이션 (0)	2024.11.13
7일차: Angular 16 서비스와 의존성 주입 (DI) 기초 (0)	2024.11.12
5일차: Angular 16 이벤트 바인딩 - 사용자 인터랙션 처리하기 (1)	2024.11.11
4일차: Angular 16 데이터 바인딩의 기초 - 화면에 데이터 표시하기 (0)	2024.11.10
3일차: Angular 16 컴포넌트란 무엇인가? (0)	2024.11.09

재우니의 블로그

6일차: Angular 16 지시자 (Directives) 이해하기