데이터 바인딩이란? Angular에서 데이터를 표시하는 다양한 방법 & 단방향, 양방향 데이터 바인딩 실습 (Angular 16 기준)

서론

Angular 16에서 데이터 바인딩은 애플리케이션의 데이터를 사용자 인터페이스(UI)와 효과적으로 연결하는 핵심 기능입니다. 데이터 바인딩을 통해 컴포넌트와 UI 간의 데이터 동기화를 쉽게 처리할 수 있습니다. Angular는 단방향과 양방향 바인딩을 지원하여 화면에 데이터를 표시하거나 사용자 입력을 반영하는 다양한 방법을 제공합니다. 이번 글에서는 Angular 16에서 데이터 바인딩이 무엇인지와 단방향, 양방향 데이터 바인딩 실습을 통해 실질적인 사용 방법을 익혀보겠습니다.

본론

1. 데이터 바인딩이란?

데이터 바인딩의 개념

데이터 바인딩은 Angular 컴포넌트의 데이터와 UI를 자동으로 동기화해주는 기능으로, 데이터를 화면에 표시하거나 화면에서의 입력을 데이터로 받아오는 과정을 단순화합니다. 이로 인해 개발자는 데이터가 변화할 때마다 UI를 별도로 업데이트하지 않아도 됩니다.

Angular의 주요 데이터 바인딩 방식

Angular 16에서는 다음과 같은 주요 데이터 바인딩 방식을 제공합니다:

단방향 바인딩 (One-Way Binding): 데이터가 컴포넌트에서 UI로 전달됩니다.
- 인터폴레이션(Interpolation): {{ }}를 사용해 컴포넌트의 데이터를 HTML 템플릿에서 바로 표시합니다.
- 속성 바인딩(Property Binding): [ ]를 사용해 HTML 속성에 컴포넌트의 데이터를 전달합니다.
- 이벤트 바인딩(Event Binding): ( )를 사용해 HTML 요소에서 발생한 이벤트를 컴포넌트의 메서드와 연결합니다.
양방향 바인딩 (Two-Way Binding): 컴포넌트와 UI 간에 데이터를 동시에 전달하며 주로 사용자의 입력 데이터를 실시간으로 반영할 때 유용합니다.
- [(ngModel)]을 사용해 양방향으로 데이터를 연결합니다.

2. 데이터 바인딩 실습

Angular 16에서 제공하는 다양한 데이터 바인딩 방식에 대해 실습을 통해 학습해보겠습니다.

1) 단방향 데이터 바인딩 실습

(1) 인터폴레이션

컴포넌트에서 문자열 데이터를 정의하고, {{ }}을 사용하여 HTML에서 데이터를 표시해봅니다.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title: string = "Angular 16 데이터 바인딩 예제";
}

<!-- app.component.html -->
<h1>{{ title }}</h1>

결과: title 변수에 있는 문자열이 h1 태그 내에 표시됩니다.

(2) 속성 바인딩

HTML 요소의 속성에 컴포넌트의 데이터를 바인딩해보겠습니다. 이미지의 src 속성을 컴포넌트 데이터로 설정할 수 있습니다.

// app.component.ts
export class AppComponent {
  imageUrl: string = 'https://angular.io/assets/images/logos/angular/angular.png';
}

<!-- app.component.html -->
<img [src]="imageUrl" alt="Angular 로고" width="150">

결과: imageUrl에 지정된 이미지가 페이지에 표시됩니다.

(3) 이벤트 바인딩

버튼 클릭 시 동작하는 함수를 이벤트 바인딩으로 연결하여 클릭 이벤트가 발생했을 때 컴포넌트의 메서드를 실행합니다.

// app.component.ts
export class AppComponent {
  message: string = "버튼을 눌러보세요!";

  updateMessage() {
    this.message = "버튼이 눌렸습니다!";
  }
}

<!-- app.component.html -->
<p>{{ message }}</p>
<button (click)="updateMessage()">메시지 변경</button>

결과: 버튼을 클릭하면 updateMessage 메서드가 실행되어 message가 업데이트됩니다.

2) 양방향 데이터 바인딩 실습

양방향 데이터 바인딩을 사용하려면 FormsModule이 필요합니다. Angular 16에서는 @angular/forms에서 FormsModule을 가져와야 합니다.

(1) FormsModule 추가

먼저, FormsModule을 app.module.ts 파일에 임포트하여 양방향 바인딩을 사용할 준비를 합니다.

// app.module.ts
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule  // 양방향 바인딩을 위한 FormsModule 추가
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

(2) 양방향 데이터 바인딩 사용하기

[(ngModel)]을 사용하여 사용자가 입력한 값을 컴포넌트 속성과 연결해보겠습니다.

// app.component.ts
export class AppComponent {
  name: string = "";
}

<!-- app.component.html -->
<label for="name">이름 입력: </label>
<input id="name" [(ngModel)]="name" placeholder="이름을 입력하세요">
<p>안녕하세요, {{ name }}님!</p>

결과: 사용자가 입력 필드에 이름을 입력하면, 입력한 내용이 name 속성에 즉시 반영되고 {{ name }} 바인딩을 통해 화면에 표시됩니다. 즉, "안녕하세요, [입력한 이름]님!"이라는 텍스트가 나타납니다.

결론

이번 글에서는 Angular 16의 데이터 바인딩 개념과 종류를 이해하고, 단방향과 양방향 바인딩 방식을 각각 실습해보았습니다. 데이터 바인딩은 Angular에서 데이터와 UI를 자동으로 연결해 주어 효율적인 데이터 표현이 가능하게 합니다. 단방향 바인딩은 주로 데이터를 화면에 출력할 때 사용되며, 양방향 바인딩은 사용자의 입력 데이터를 컴포넌트에 실시간으로 반영해야 할 때 유용합니다. Angular 데이터 바인딩을 마스터하면 더 강력하고 직관적인 사용자 인터페이스를 만들 수 있습니다.

Q&A 섹션

Q1: 양방향 바인딩에서 FormsModule이 필요한 이유는 무엇인가요?
A1: [(ngModel)] 디렉티브는 FormsModule에 포함된 기능이므로 양방향 바인딩을 사용하려면 반드시 FormsModule을 임포트해야 합니다.
Q2: 단방향과 양방향 바인딩의 주된 차이점은 무엇인가요?
A2: 단방향 바인딩은 컴포넌트에서 UI로 데이터가 전달되며, 양방향 바인딩은 컴포넌트와 UI가 데이터를 상호 동기화할 수 있습니다.
Q3: Angular의 데이터 바인딩 방식 중 @Input과 @Output도 있나요?
A3: 네, @Input과 @Output 데코레이터는 부모-자식 컴포넌트 간 데이터 전달에 주로 사용되며, 데이터 바인딩과 관련된 중요한 기능입니다.

6일차: Angular 16 지시자 (Directives) 이해하기 (0)	2024.11.11
5일차: Angular 16 이벤트 바인딩 - 사용자 인터랙션 처리하기 (1)	2024.11.11
3일차: Angular 16 컴포넌트란 무엇인가? (0)	2024.11.09
2일차: Angular 16 CLI를 사용해 첫 프로젝트 생성하고 구조 이해하기 (2)	2024.11.08
1일차: Angular 16과 프레임워크의 기본 개념 이해하기 (8)	2024.11.07

재우니의 블로그

4일차: Angular 16 데이터 바인딩의 기초 - 화면에 데이터 표시하기