컴포넌트에 입력값 추가하기

이번 실습에서는 컴포넌트의 input을 만들고 데이터를 전달해 컴포넌트를 원하는 대로 표시하는 방법을 알아봅니다.

학습 목표

앱의 HousingLocation 컴포넌트에 입력값을 받을 housingLocation 프로퍼티를 추가합니다.

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

입력 프로퍼티를 사용하면 부모 컴포넌트에서 전달받을 데이터를 정의할 수 있습니다.

이번 실습에서는 HousingLocation 컴포넌트에 input 프로퍼티를 정의해 표시할 데이터를 지정합니다.

자세한 내용은 입력 프로퍼티로 데이터 받기와 출력 프로퍼티로 커스텀 이벤트 발생시키기 가이드를 참고하세요.

1. input() 함수 불러오기

   코드 에디터에서 HousingLocation 컴포넌트에 @angular/core의 input 함수와 ../housinglocation의 HousingLocationInfo 인터페이스를 불러오세요.

   housing-location.ts에서 input과 HousingLocationInfo 불러오기

   import {Component, input} from '@angular/core';
   import {HousingLocationInfo} from '../housinglocation';
   
   @Component({
     selector: 'app-housing-location',
     template: ` <p>housing-location works!</p> `,
     styleUrls: ['./housing-location.css'],
   })
   export class HousingLocation {
     housingLocation = input.required<HousingLocationInfo>();
   }

2. 입력 프로퍼티 추가하기

   housingLocation이라는 필수 입력 프로퍼티를 추가하고 HousingLocationInfo 타입을 지정한 input.required()로 초기화하세요.

   housing-location.ts에 입력 프로퍼티 선언하기

   import {Component, input} from '@angular/core';
   import {HousingLocationInfo} from '../housinglocation';
   
   @Component({
     selector: 'app-housing-location',
     template: ` <p>housing-location works!</p> `,
     styleUrls: ['./housing-location.css'],
   })
   export class HousingLocation {
     housingLocation = input.required<HousingLocationInfo>();
   }

   부모 컴포넌트가 반드시 값을 전달하도록 하려면 input의 required 메서드를 호출해야 합니다. 예제 앱은 이 값을 항상 전달하도록 설계했습니다. .required()를 호출하면 TypeScript 컴파일러가 템플릿에서 이 컴포넌트를 사용할 때 필수 입력값을 검사하며, 해당 프로퍼티의 값에 null이 포함되지 않는 것으로 취급합니다.

3. 입력 프로퍼티에 데이터 전달하기

   Home 컴포넌트의 housingLocation 값을 HousingLocation 컴포넌트의 housingLocation 프로퍼티로 전달하세요.

   home.ts에서 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,
     };
   }

SUMMARY: 이번 실습에서는 새 input 프로퍼티를 만들었습니다. 또한 .required() 메서드로 시그널에 반드시 값이 제공되도록 했습니다.