유저의 행동에 대해 대응할 수 있게 해주는 이벤트 바인딩에 대해 알아보겠습니다.
이번 포스트에서는 아래 내용을 다루고 있습니다.
- 이벤트바인딩
- 표준 이벤트 찾는 법
이벤트바인딩
지난 포스트에서 알아본 모든 데이터 바인딩은 컴포넌트에서 템플릿까지의 단방향 바인딩 이였습니다.
그러나 사용자가 버튼을 클릭할 때처럼 사용자의 동작에 대응하기 위해 다른 방법으로 정보를 보내야 할 필요가 있습니다.
컴포넌트는 이벤트 바인딩을 사용하면 유저의 작업을 수신이 가능하고, 이벤트 바인딩을 통해 이벤트를 구성 요소의 메소드에 연결할 수 있습니다.
아래 코드는HTML 버튼 요소에 이벤트 바인딩을 해 놓은 상태 입니다.
버튼의 click 이벤트를 컴포넌트의 toggleImg 메소드에 바인딩한다고 해석 할 수 있습니다.
유저가 버튼을 클릭하면 바인딩이 toggleImg메소드의 코드를 실행하게 됩니다.
이벤트 바인딩을 사용하기 위해선 이벤트 이름(예의 click)을 괄호로 묶어 표기해야 합니다.
메서드 이름 뒤에는 여는 괄호와 닫는 괄호가 붙으며 따옴표로 표기합니다.
표현식 안에 간단히 메서드의 호출을 생각한다고 보면 되겠네요.
click이벤트와 같은 유효한 html요소 이벤트를 어떻게 알 수 있을까요?
표준 이벤트 찾는 법
Google에서 모질라 이벤트라고 검색한 뒤 이벤트 참조라고 써있는 링크로 접속 합니다.
click이벤트는 마우스 이벤트 쪽에서 찾을 수 있습니다.
해당 이벤트의 링크로 들어가면 더욱 자세한 설명 및 예제를 확인할 수 있습니다.
표준 이벤트 목록을 찾아볼 수 있으므로 매우 유용합니다.
영화 목록 예제 실습
지금부터 이벤트바인딩을 이용하여 영화 목록 화면을 업데이트 해보겠습니다.
이미지 보이기 버튼은 클릭을 해도 아직 아무런 반응이 없는 상태입니다.
이 버튼은 이미지가 안보일 때는 클릭했을시 영화 이미지를 표시해주고, 이미지가 보이는 상태라면 클릭시 이미지를 숨기는 역할을 하게 될 것입니다.
먼저 컴포넌트 클래스에 이미지의 표시 여부를 추적하는 프로퍼티를 정의합니다.
isImgDisplayed를 정의하였고 페이지가 처음 로딩될때는 이미지를 표시 하지 않게 하기 위해서 디폴트 값을 false로 할당하였습니다.
이제 이벤트 바인딩을 할 메서드를 작성하겠습니다.
메소드의 이름을 toggleImg로 지정하였습니다.
이 메소드는 리턴 타입이 없기 때문에, void로 리턴 타입을 지정했습니다.
메소드 본문은 isImgDisplayed속성의 상태를 전환하기만 하면 됩니다.
여기서 사용되는 느낌표는 논리 not연산자 입니다.
피연산자( isImgDisplayed)가 true이면 false를 반환하고 isImgDisplayed가 false이면 true를 반환하며 기본적으로 값을 true에서 false로 전환합니다.
이제 템플릿에서 이벤트 바인딩을 설정할 준비가 다 되었습니다.
button요소의 click이벤트에 togglmg를 바인딩 했습니다.
이제 버튼의 클릭이벤트가 발생한다면 컴포넌트 클래스에 정의되어있는 toggleImg메소드가 호출 되고 isImgDIsplayed값이 토글 될것 입니다.
버튼의 innerText도 보간을 사용해서 isImgDisplayed가 true이면 "이미지숨기기" false이면 "이미지보이기"가 표시 되도록 해보았습니다.
마지막으로 실제로 이미지가 보이거나 숨기기 위해서 img테그안에 구조지시자인 ngIf를 사용해서 isImgDIsplayed값을 평가해 true일때는 img태그를 추가해주고 false일때는 img태그를 삭제해주도록 바꿨습니다.
이제 브라우저에서 살펴보도록 하겠습니다.
이벤트 바인딩이 잘 작동하네요.
기본적으로 Angular는 바인딩된 속성의 변경을 지속적으로 감시하고 이벤트를 수신합니다.
Angular의 변화 감지(Change Detection) 기능은 그 변화를 감지하고 자동으로 모든 바인딩을 재평가합니다. 영화 이미지가 보여지고 숨겨지는 것도 이러한 앵귤러 기능 떄문에 가능한 것 입니다.
수고하셨습니다. 이것으로 이벤트 바인딩에 대해 마치도록 하겠습니다.
다음 포스트는 양방향 바인딩에 대해 다룰 예정입니다.
'프로그래밍 > Angular' 카테고리의 다른 글
| 앵귤러 기초(Angular basic) 12.파이프(pipe) (0) | 2022.01.22 |
|---|---|
| 앵귤러 기초(Angular basic) 11.양방향 바인딩(Two-way Binding) (0) | 2022.01.21 |
| 앵귤러 기초(Angular basic) 9.프로퍼티 바인딩(property binding) (0) | 2022.01.19 |
| 앵귤러 기초(Angular basic) 8.ngFor (0) | 2022.01.18 |
| 앵귤러 기초(Angular basic) 7.Structural Directive, ngIf (0) | 2022.01.17 |
댓글