Angular2 - 유저 입력

유저가 링크를 클릭하거나 버튼을 눌렀을때 혹은 텍스트를 입력했을때, 우리는 그것에 대해 알고 싶을때가 있다. 이러한 유저 액션은 DOM 이벤트로서 일어난다. 이번 챕터에서는 Angular 이벤트 바인딩 문법을 활용해 이러한 이벤트를 처리하는 방법에 대해서 알아보자.

유저 입력 이벤트 바인딩

우리는 DOM 이벤트에 응답하는 Angular 이벤트 바인딩을 사용할 수 있다.

문법은 간단하다. DOM 이벤트명을 괄호로 둘러싸고 템플릿 문장으로 할당하면 된다. 다음 예는 click hander를 구현하기 위해 이벤트 바인딩을 한 예이다.

<button (click)="onClickMe()">Click me!</button>

(click)은 바인딩의 타겟을 의미한다. 따옴표안의 문자는 오른편은 컴포넌트 이벤트의 응답으로 컴포넌트 메소드 onClickMe를 할당했다는 것을 의미한다. 

바인딩을 작성할때는 템플릿 구문의 execution context를 알아야 한다. 구문에 나타난 identifier는 특정한 context 객체에 속한다. 이 오브젝트는 항상 템플릿을 컨트롤하는 Angular의 컴포넌트이다.

@Component({
  selector: 'click-me',
  template: `
    <button (click)="onClickMe()">Click me!</button>
    {{clickMessage}}`
})
export class ClickMeComponent {
  clickMessage = '';

  onClickMe() {
    this.clickMessage = 'You are my hero!';
  }
}

위의 예에서는 유저가 버튼을 클릭하면 Angular는 컴포넌트의 onClickMe 메소드를 호출한다.

$event 오브젝트로부터 유저 입력가지고 오기

우리는 모든 종류의 이벤트를 바인드할 수 있다. input 박스의 keyup 이벤트를 바인딩하고 스크린에 유저 타이핑을 출력한다.

template: `
  <input (keyup)="onKey($event)">
  <p>{{values}}</p>
`

Angular는 $event 변수에 사용가능한 event 객체를 만든다. 그런 다음 컴포넌트의 onKey메소드에 전달한다. 

export class KeyUpComponent_v1 {
  values = '';

  // without strong typing
  onKey(event:any) {
    this.values += event.target.value + ' | ';
  }
}

$event객체의 형태는 발생하는 이벤트에 의해 결정된다. keyup 이벤트는 DOM으로 부터 발생하며 $event는 표준 DOM 이벤트 객체이다. $event.target은 HTMLInputElement를 우리에게 전달하며 value 프로퍼티는 유저의 입력값이다.

onKey() 컴포넌트 메소드는 이벤트 입력으로부터 유저의 입력값을 추출하고 컴포넌트의 values 프로퍼티에 할당한다. 이럴경우 삽입을 통해 해당 값이 스크린에 다시 출력된다.

결과는 다음과 같다.

템플릿 참조값으로 유저 입력 가지고 오기

$event 변수 없이 유저 데이터를 가지고오는 다른 방법이 있다.

Angular 템플릿 참조 변수라고 불리우는 문법을 가지고 있다. 이는 엘리먼트에 직접 접근을 가능하게 하는 변수이다.  우리는 템플릿 참조 변수는 #을 붙임으로써 정의할 수 있다.

다음 예를 살펴보자.

@Component({
  selector: 'loop-back',
  template: `
    <input #box (keyup)="0">
    <p>{{box.value}}</p>
  `
})
export class LoopbackComponent { }

우리는 box라는 템플릿 참조 변수를 <input> 엘리먼트에 선언하였다. box 변수는 <input> 엘리먼트 자신에 대한 참조자이다. 즉, 우리는 input elements의 값을 바로 <p> 태그에 삽입할 수 있다는 것이다.

템플릿은 완벽하게 셀프 컨테이너를 구성한다. 여기서는 컴포넌트에 바인드되지 않으며, 컴포넌트는 아무것도 하지 않는다.

입력박스를 타이핑해보자. 각 키입력이 출력되는 것을 알 수 있다.

입력박스를 타이핑해보자. 각 키입력이 출력되는 것을 알 수 있다.

템플릿 참조 함수는 매우 흥미롭다. 텍스트박스를 직접 참조하는 것은 $event 오브젝트를 통해 전달하는 것보다 훨씬 명확하다. 이전에 예제는 다음과 같이 변경될 수 있다.

@Component({
  selector: 'key-up2',
  template: `
    <input #box (keyup)="onKey(box.value)">
    <p>{{values}}</p>
  `
})
export class KeyUpComponent_v2 {
  values = '';
  onKey(value: string) {
    this.values += value + ' | ';
  }

키 이벤트 필터링

아마도 우리는 모든 키입력에 관심이 있진 않을 것이다. 어쩌면 입력 박스 값에 엔터가 입력되었을때의 값에 관심이 있고 다른 키들은 무시할고 싶을 수도 있다. (keyup) 이벤트에 바인딩을 했을때는 모든 키입력 이벤트가 발생한다. 우리는 먼저 키를 필터링하기 위해서 $event.keyCode를 관찰하고 Enter키가 전달되었을때 이벤트를 핸들링 하면 될 것이다.

Angular는 키 이벤트 필터한다. Angular는 키보드 이벤트를 위한 특별한 문법을 가지고 있다. 우리는 Angular의 keyup.enter 이벤트를 바인딩함으로써 Enter key에 대한 이벤트처리를 수행할 수 있다.

@Component({
  selector: 'key-up3',
  template: `
    <input #box (keyup.enter)="values=box.value">
    <p>{{values}}</p>
  `
})
export class KeyUpComponent_v3 {
  values = '';
}

On blur

예전 예제에서 유저 마우스가 떠나거나 페이지의 다른 부분을 클릭했을때의 상태는 처리하지 않았다. 

입력박스의 blur 이벤트를 처리하고 싶다면 아래와 같이 하면 된다.

@Component({
  selector: 'key-up4',
  template: `
    <input #box
      (keyup.enter)="values=box.value"
      (blur)="values=box.value">

    <p>{{values}}</p>
  `
})
export class KeyUpComponent_v4 {
  values = '';
}

출처 : https://angular.io/docs/ts/latest/guide/user-input.html