컴포넌트 입력 프로퍼티

앱을 개발하다보면 컴포넌트로 데이터를 전달해야 하는 경우가 있습니다. 이렇게 전달하는 데이터는 컴포넌트를 커스터마이징할 때 사용되거나, 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달하는 용도로 사용됩니다.

Angular는 입력 프로퍼티라는 개념을 사용합니다. 다른 프레임워크의 props와 비슷한 개념인데, 입력 프로퍼티는 input() 함수를 실행해서 생성합니다.

참고: 입력 프로퍼티로 데이터 전달하기 문서를 참고하세요.

이번 예제에서는 input() 함수를 사용해서 입력 프로퍼티를 선언한 후에, 컴포넌트로 정보를 전달해 봅시다.

입력 프로퍼티를 생성하려면 컴포넌트 클래스에서 input() 함수를 사용해서 프로퍼티를 생성하면 됩니다:

      
class User {  occupation = input<string>();}
    

이제 입력 프로퍼티로 데이터를 전달할 준비가 되었으면, 템플릿에서 어트리뷰트로 바인딩하는 문법을 사용합니다. 예제를 확인해 보세요:

      
@Component({  ...  template: `<app-user occupation="Angular Developer"></app-user>`})class App {}
    

input 함수는 InputSignal을 반환합니다. 그래서 값을 참조하려면 시그널을 실행하면 됩니다.

      
@Component({  ...  template: `<p>The user's occupation is {{occupation()}}</p>`})
    

1. input() 프로퍼티를 선언해 보세요

   user.ts 파일을 열어서 User 컴포넌트에 입력 프로퍼티로 name을 string 타입으로 선언해 보세요. 아직은 초기값을 지정하지 않을 것이기 때문에 인자 없이 input()을 실행해 봅니다. name 프로퍼티가 템플릿에 그대로 바인딩되지 않도록 실행해야 한다는 것을 주의하세요.

2. 입력 프로퍼티로 데이터를 전달해 보세요

   app.ts 파일을 수정해서 name 프로퍼티로 "Simran"을 전달해 보세요.

   
   

   제대로 수정했다면 화면에는 The users' name is Simran 이라는 문구가 표시될 것입니다.

입력 프로퍼티는 훌륭하지만 아직까지는 컴포넌트 통신 중 한 방향만 알아봤습니다. 자식 컴포넌트에서 부모 컴포넌트로 데이터를 보낼 때는 어떻게 하면 될까요? 이 내용은 다음 단계에서 확인해 봅시다.

P.S. 잘 진행하고 있습니다 - 좀 더 힘내세요 🎉