AngularJS에서 디렉티브 사용법과 예제
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 대상자: AngularJS를 사용하는 웹 개발자
- 난이도: 중급~고급(기본 개념 이해 및 커스텀 디렉티브 작성 경험 필요)
핵심 요약
- 디렉티브는 HTML에 커스텀 동작을 추가하는 AngularJS의 핵심 기능으로,
ng-model
,ng-repeat
등 사전 정의된 디렉티브와 커스텀 디렉티브로 구성 - 커스텀 디렉티브 작성 시
app.directive('directiveName', function() { ... })
형식 사용,restrict
옵션으로'E'
(요소),'A'
(속성),'C'
(클래스) 등 사용 가능 - 링크 함수(
link
)는 DOM 조작 및 이벤트 처리에 사용,compile
은 템플릿 DOM 조작 전에 사용 - 두-way 바인딩은
=
사용, 고립 스코프(isolated scope
) 사용으로 스코프 오염 방지
섹션별 세부 요약
1. 디렉티브의 정의와 목적
- 디렉티브는 DOM 요소에 특정 동작을 추가하거나 DOM을 변환하는 마커
- 주요 목적:
- 코드 재사용성 향상 (
) - 복잡한 UI 동작 간소화
- 템플릿과 로직 분리
2. 사전 정의된 디렉티브 예시
- 예시 디렉티브:
ng-model
: 입력 필드와 모델 연결ng-repeat
: 컬렉션 아이템 반복ng-click
: 클릭 이벤트에 함수 연결ng-if
: 조건에 따라 요소 포함 여부 결정
3. 커스텀 디렉티브 작성 방법
- 기본 구조:
```javascript
app.directive('helloWorld', function() {
return {
restrict: 'E',
template: '
Hello World from Custom Directive!
'};
});
```
- 사용 예시:
로 HTML 요소에 직접 삽입
4. `link` vs `compile` 함수
link
: DOM 조작 및 이벤트 등록 (예:element.bind('click', ...)
)compile
: 템플릿 DOM 조작 전에 실행 (예: 템플릿 수정)- 추천: 대부분의 경우
link
사용
5. 디렉티브 최적화 팁
- 고립 스코프 사용:
scope: { user: '=' }
으로 부모 스코프와의 두-way 바인딩 - 디렉티브 이름: HTML에서
-
사용 (my-directive
), JavaScript에서camelCase
사용 - 디렉티브 제한: 컴포넌트에는
'E'
, 동작에는'A'
사용
6. 디렉티브 테스트 방법
- 테스트 도구: Karma + Jasmine
- 예시:
```javascript
describe('Directive: helloWorld', function() {
it('should render Hello World', function() {
expect(element.html()).toContain("Hello World");
});
});
```
결론
- 커스텀 디렉티브는 재사용 가능한 UI 컴포넌트 개발에 필수,
restrict
,link
,scope
옵션을 정확히 사용 - 테스트는
Karma
와Jasmine
을 활용해 디렉티브의 독립적인 동작을 검증 - 최적화 팁: 고립 스코프 사용, 명확한 이름 지정,
link
함수 우선 활용