Angular ngIf 처럼 동작하는 custom directive 만들기

개요

백오피스에서는 사용자의 등급에 따라 다양한 UI를 효과적으로 제공해야 하는 요구사항이 있었습니다.
이를 해결하기 위해 Angular에서는 사용자의 등급에 따라 UI를 동적으로 변경할 수 있는 Structure Directive를 사용하였습니다.

 

*ngIf 사용

*ngIf="로그인한 계정의 등급 === 대상 등급"

처음에는 *ngIf 디렉티브를 사용해서 조건부로 UI를 렌더링하는 방식을 사용하였지만, 아래와 같은 문제점이 있었습니다.

• 로그인한 계정 정보를 가져오는 로직이 사용하는 컴포넌트 마다 중복됨
• 조건의 가독성이 좋지 않음

 

Structure directive 제작

이러한 문제를 해결하기 위해 Custom Structure Directive를 제작하였습니다. 아래는 해당 Directive의 구현 내용입니다.

@Directive({
  selector: '[checkPermissionByRole]'
})
export class CheckPermissionByRoleDirective implements OnInit {
  @Input() public set checkPermissionByRole(role: RoleType) {
    this.permissionToRole = role;
  }

  private permissionToRole: RoleType;

  public constructor(
    private cdRef: ChangeDetectorRef,
    private view: ViewContainerRef,
    private template: TemplateRef<any>
  ) { }

  public ngOnInit() {
    ...현재 로그인한 정보를 계정의 정보를 가져오는 로직
    this.onAccountInfoChanged(role);

  }

  private onAccountInfoChanged = (role: RoleType) => {
    if (role === this.permissionToRole) {
      this.view.createEmbeddedView(this.template);
    } else {
      this.view.clear();
    }

    this.cdRef.markForCheck();
  };
}

createEmbeddedView()

createEmbeddedView() 메서드는 지정된 템플릿(TemplateRef)을 현재 뷰 컨테이너(ViewContainerRef)에 삽입하여 동적으로 UI를 생성하는 데 사용됩니다.
즉, 해당 템플릿이 화면에 나타나게 됩니다.

 

clear()

clear() 메서드는 뷰 컨테이너에서 현재 삽입된 모든 뷰를 제거하여 UI(자식 요소)를 모두 지웁니다.

 

디렉티브 사용

해당 디렉티브를 아래와 같이 사용하면, 해당 등급이 RoleType.SUPER_ADMIN과 일치할 때에만 요소가 렌더링됩니다.

<div *checkPermissionByRole="RoleType.SUPER_ADMIN"></div>

 

마무리

Custom structure directive를 활용하여 코드의 가독성과 재사용성을 얻을 수 있었다.
*ngIf의 조건이 복잡하거나, 조건을 확인하기 위해 로직이 중복된다면 directive를 직접 만드는 것을 추천드립니다.
특히 동일한 템플릿을 동적으로 노출시켜야할 때는 매우 유용하게 사용할 수 있습니다.
앵귤러 가이드 문서에도 자세하게 나와있으니, 필요하신 분들은 참고하면 좋을 것같습니다👍