컴포넌트 템플릿에 프로퍼티 바인딩 추가하기

이번 실습에서는 템플릿에 프로퍼티 바인딩을 추가하고 컴포넌트에 동적 데이터를 전달하는 방법을 알아봅니다.

학습 목표

Home 템플릿에 데이터 바인딩을 추가합니다.
Home에서 HousingLocation으로 데이터를 전달합니다.

입력 프로퍼티 개념 살펴보기

이번 실습에서는 프로퍼티 바인딩으로 템플릿의 프로퍼티에 데이터를 연결하며 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 과정을 이어갑니다.

프로퍼티 바인딩을 사용하면 Angular 템플릿에서 변수를 입력 프로퍼티에 연결할 수 있습니다. 데이터는 입력 프로퍼티에 동적으로 바인딩됩니다.

자세한 내용은 프로퍼티 바인딩 가이드를 참고하세요.

`Home` 템플릿 수정하기

이 단계에서는 <app-housing-location> 태그에 프로퍼티 바인딩을 추가합니다.

코드 에디터에서 다음 작업을 수행하세요:

src/app/home/home.ts를 여세요.

@Component 데코레이터의 template 프로퍼티를 다음 코드와 같이 수정하세요:

housingLocation 프로퍼티 바인딩 추가하기

import {Component} from '@angular/core';
import {HousingLocation} from '../housing-location/housing-location';
import {HousingLocationInfo} from '../housinglocation';

@Component({
  selector: 'app-home',
  imports: [HousingLocation],
  template: `
    <section>
      <form>
        <input type="text" placeholder="Filter by city" />
        <button class="primary" type="button">Search</button>
      </form>
    </section>
    <section class="results">
      <app-housing-location [housingLocation]="housingLocation" />
    </section>
  `,
  styleUrls: ['./home.css'],
})
export class Home {
  readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';

  housingLocation: HousingLocationInfo = {
    id: 9999,
    name: 'Test Home',
    city: 'Test city',
    state: 'ST',
    photo: `${this.baseUrl}/example-house.jpg`,
    availableUnits: 99,
    wifi: true,
    laundry: false,
  };
}

컴포넌트 태그에 프로퍼티 바인딩을 추가할 때는 [attribute]="value" 문법을 사용합니다. 이렇게 하면 Angular는 오른쪽 값을 문자열 리터럴이 아니라 컴포넌트 컨텍스트에서 평가할 표현식으로 처리합니다.

이 예제에서 오른쪽 값은 Home의 프로퍼티 이름입니다.

코드가 정상적으로 동작하는지 확인하기
1. 변경 사항을 저장하고 앱에 오류가 없는지 확인하세요.
2. 오류가 있다면 수정한 후 다음 단계로 진행하세요.

SUMMARY: 이번 실습에서는 프로퍼티 바인딩을 추가하고 클래스 프로퍼티를 참조하도록 했습니다. 이제 HousingLocation에서 전달받은 데이터를 사용해 컴포넌트 화면을 구성할 수 있습니다.

이 실습에서 다룬 내용을 더 알아보려면 다음 문서를 참고하세요:

학습 목표

입력 프로퍼티 개념 살펴보기

Home 템플릿 수정하기

housingLocation 프로퍼티 바인딩 추가하기

코드가 정상적으로 동작하는지 확인하기

`Home` 템플릿 수정하기