Angular에서 자식 컴포넌트 세터로 데이터 전달하기

부모 컴포넌트의 데이터가 private 속성의 세터(setter)로 전달되도록 만들 수 있습니다. 예제를 통해 살펴봅시다. private 속성에 세터와 게터가 있다고 가정해 보겠습니다:

class UserComponent {
	private _name: string = '';
	
	set name(name: string) {
		if (name.length < 3) {
			this._name = name;
		} else {
			console.log('error');
		}
	}
	
	get age() {
		return this._userAge;
	}
}

예를 들어, 전달된 데이터의 유효성을 검사하는 나이(age) 세터를 구현해 보겠습니다. 또한 사용자 속성을 출력하기 위한 게터도 만들겠습니다:

class UserComponent {
	private _name: string = '';
	
	@Input()
	set name(name: string) {
		if (name.length > 3) {
			this._name = name;
		} else {
			console.log('error');
		}
	}
	
	get name() {
		return this._name;
	}
}

이제 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해 보겠습니다:

<user-data name="john"></user-data>

그리고 자식 컴포넌트에서 전달된 이름을 화면에 출력하겠습니다:

<p>{{ name }}</p>

왜 private 속성 _name이 밑줄 문자로 시작하는지 설명하세요.

부모 컴포넌트에서 전달될 제품 이름과 가격에 대한 세터와 게터를 구현하세요.