Angular ElementRef 대신 Renderer2 를 사용하자

Angular 컴포넌트 클래스에서 HTML DOM 에 접근하여 css나 값을 변경하는 것은 어렵지 않습니다. 아래 코드에서 <h1> 태그에 템플릿 참조 변수 h1을 선언하고 아래 button을 클릭하면 component class의 changeH1TagInfo 함수를 호출합니다.

<h1 #h1>Hi </h1>
<button (click)=”changeH1TagInfo()”>change-button</button>

컴포넌트 클래스 코드는 아래와 같습니다. ViewChild를 이용해 템플릿 참조 변수 h1을 ElementRef 타입으로 받습니다. 버튼이 클릭되면 ElementRef의 nativeElement를 통해 css와 값을 변경합니다.

@ViewChild(‘h1’) myH1: ElementRef;
changeH1TagInfo() {
  this.myH1.nativeElement.style.color=’green’
  this.myH1.nativeElement.innerHTML = ‘<b>changeValue</b>’
}

ElementRef는 손쉽게 DOM을 조작할 수 있지만 직접적으로 DOM을 조작하다 보니 보안공격에 취약합니다. Angular 공식사이트에서 ElementRef에 대해 아래와 같은 내용을 볼 수 있습니다. DOM에 직접 접근하는 것은 XSS 크로스 사이트 스크립팅 공격에 매우 취약하다고 합니다.

과거엔 Renderer 현재는 Renderer2를 통해 동일하게 DOM을 안전하게 조작할 수 있습니다.

import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';
@ViewChild('h1') myH1: ElementRef;
constructor(private renderer: Renderer2) {}
changeH1TagInfo() {
   this.renderer.setStyle(this.myH1.nativeElement, 'color', 'green')
   this.renderer.setProperty(this.myH1.nativeElement, 'innerHTML',   '<b>changeValue</b>')
}