.jpg)
프론트엔드 데이터 바인딩
Table of Content
데이터 바인딩을 위한 @Input 데코레이터
@input 데코레이터를 통한 데이터 바인딩
Angular에서 데이터 바인딩을 위한 데코레이터는 주로 @Input()을 사용하여 부모 컴포넌트로부터 값을 받아오는 데 사용됩니다. 이 데코레이터는 자식 컴포넌트에서 부모 컴포넌트의 데이터를 바인딩할 수 있게 해줍니다.
다음은 Angular에서 @Input() 데코레이터를 사용하여 데이터 바인딩을 구현하는 간단한 예시입니다.
1.
자식 컴포넌트 생성
먼저 자식 컴포넌트를 생성하고, @Input()을 사용하여 데이터를 받을 준비를 합니다.
// child.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `<p>자식 컴포넌트: {{ childData }}</p>`,
})
export class ChildComponent {
@Input() childData: string; // 부모로부터 받을 데이터
}
TypeScript
복사
2.
부모 컴포넌트 생성
부모 컴포넌트에서 자식 컴포넌트를 사용하고, 데이터를 전달합니다.
// parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<h1>부모 컴포넌트</h1>
<app-child [childData]="parentData"></app-child>
`,
})
export class ParentComponent {
parentData: string = '안녕하세요, 자식 컴포넌트!'; // 자식에게 전달할 데이터
}
TypeScript
복사
3.
모듈에 컴포넌트 추가
모듈 파일에 자식 컴포넌트를 추가합니다.
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';
@NgModule({
declarations: [
AppComponent,
ParentComponent,
ChildComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
TypeScript
복사
4.
결과
이제 Angular 애플리케이션을 실행하면, 부모 컴포넌트에서 자식 컴포넌트로 데이터가 바인딩되어 표시됩니다. 자식 컴포넌트는 부모의 데이터를 받아서 화면에 출력하게 됩니다.
이렇게 @Input() 데코레이터를 사용하여 Angular에서 데이터 바인딩을 구현할 수 있습니다.
Related Posts
Search
