[번역] jQuery 없이 AngularJS에서 DOM 이벤트 제어하기.

2015년 8월 5일 ng-newsletter 에 포함된 Handle DOM Events the Angular Way Without jQuery – DAVE CEDDIA 를 번역한 글 입니다.

 

많은 Angular 뉴비들이 “jQuery 에서 하던대로 생각”해서 어려움을 겪는다. Angular로 개발할 때에는 조금 다른 방식으로 생각해야 한다. jQuery 에서 작동 되게끔 (patchy/hacky) 개발하던 스타일이 아니라 보다 더 계획적으로 개발해야 한다는 것이다.

한번  jQuery 방식과 Angular 방식에 어떤 차이가 있는지 예제를 통해서 살펴보자.

“jQuery 없이” 라고 제목에는 적었지만, Angular에는 jqLite라는 jQuery 축소판이 들어있다. (만약 angular.element 를 사용하게 되면, jqLite를 통해서 실행하게 된다.)

우리가 정말로 중요하게 생각해야 할 것은, “Angular 식으로 생각하는 것” 이다. jQuery 형식의 함수를 사용할지라도, Angular 식으로 구상했다면 괜찮다.

Clicking a button

Element에 Click Event를 다는, 정말 간단한 예제를 보자.

jQuery 에서는, 아래처럼 진행 될 것이다.

The jQuery Way

코드로 바꾸면 이런 모양일 것이다:

Angular 에서는 조금 다르게 생각할 필요가 있다. 위의 jQuery 코드가 실행되지 않는다는 것이 아니다. 하지만 Angular에서는 좀 더 깔끔하고 알아보기 쉽고, 재사용 가능하게끔 만들어야 한다.

Angular 에서는 아래와 같은 프로세스로 진행 될 것이다.
The Angular Way

코드를 보면 두 개의 파일로 나뉘어져 있는데, HTML 파일에 버튼이 있고, JS 파일에 controller와 click handler가 있다.


둘의 차이가 미미해 보일 수 있다. 심지어 Angular 방식은 같은 기능을 수행하는데 더 많은 코드가 필요하다. 하지만 Angular 식으로 접근하면 다음과 같은 장점이 있다.

  1. HTML만 봐도 어떻게 작동할지 알 수 있다 – HTML만 봐도 이 Element를 클릭하면 어떤 일이 일어날 지 알 수 있게 된다. jQuery를 쓰면, JS파일에서 selector를 어떻게든 찾아내서 어떻게 작동하는지 확인해야한다.
  2. 재사용이 용이하다 – 나는 이 예제가 재사용에 관련해서 그닥 적절하지 않다는 점을 인정한다. 하지만 MissileController가 다른 버튼 어디에나 적용이 가능하다는 점과, 두번째 File Missiles 버튼을 JS 코드에 손대지 않고 만들 수 있다는 점을 생각해보자.

Interacting with elements

심플한 ‘click’예제를 봤으니, 이제 좀 더 복잡한걸 보자. 적당한 수의 부모 엘리먼트를 만들고 (존재하는 어떤것이던 간에) 자식 엘리먼트가 몇번이나 클릭되었는지 확인해보자.

jQuery에서는 이렇게 했을것이다 :
The jQuery Way to modify a DOM element

그러나 Angular 에서는 directive를 통해서 DOM 엘리먼트와 상호작용하는 방법이 제일 좋다.
The Angular Way to modify a DOM element

처음엔 문법이 좀 어색하겠지만, 어떻게 쓰는지 알면 정말 유용하게 사용할 수 있다. 간단한 일을 하는 directive들을 만들어서 연습해보자.


 


 

Check out the Plunker and try clicking around.
위 코드를 실행하면 무슨일이 일어나는지? countClicks directive (count-clicks 엘리먼트!) 가 directive에서 정의한 object를 return한다. (HTML에 렌더링 한다. – 역자 주)

link 프로퍼티는 directive가 어떻게 작동하는지 정의하는 함수이다. directive가 초기화 되는 그 시점에서 한번만 작동하며 3개의 파라미터를 필요로 한다.

  • scope 는 directive내에서 사용되는 scope이다. 윗 예제는, 부모 scope를 상속한다. “isolate scope”를 설정하는것도 가능한데, 얘는 부모 scope를 상속하지 않는다. (독립 scope).
  • elem 은 directive가 변해서 생길 element를 뜻한다. jqLite Object이며, Angular 버젼의 jQuery Object라고 생각해도 된다. 몇몇 jQuery function을 지원하지만, 약간 제한적이다. 만약 jQuery를 당신의 프로젝트에서 사용한다면 (그리고 Angular보다 jQuery를 HTML에서 먼저 불러온다면), 얘는 jqLite Object가 아니라 jQuery Object로 불러와 질 것이다.
  • attrs 는 directive에 붙은 attribute들과 매칭된다. 여기서는 사용하지 않았지만, directive에 attribute를 사용할 수 있다. 예를 들면,  <div count-clicks reason="world domination"> 이런 식으로 사용할 수 있다. 이 경우 attrs.reason 의 값은 "world domination"이 될 것이다.

자식 엘리먼트의 클릭여부를 확인하기 위해, 우리는 DOM의 이벤트 버블링에 의지한다. 자식 엘리먼트가 클릭되면 부모 엘리먼트에도 이벤트가 전달 될 것이다.(자식 엘리먼트가 event.preventDefault() 만 호출하지 않는다면!)
일단, 여기서 포스팅을 마친다.
다른 간단한 directive 들은 Angular docs에서 볼 수 있다.

Practice

위에서 언급한 내용에 익숙해지는 가장 좋은 방법은 많이 해보는 것이다. 가서 몇몇 간단한 앱들을 directive를 이용해서 만들어보자. 만약 당신이 기본적인 directive 사용법에 익숙해진다면, transclusion에 대해서도 알아보자.
그럼, 질문이 있으면 댓글로 남겨주길 바라며, 다음번 글의 주제도 댓글로 제안해주면 감사하겠다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.