Angular 구성 요소: 참조로 전달 또는 값으로 전달?

Angular 에서는 @Input() 데코레이터를 사용하여 부모 구성 요소에서 자식 구성 요소로 데이터를 전달할 수 있으며 자식 구성 요소는 @Output() 데코레이터를 사용하여 부모 주석에 이벤트를 내보낼 수 있습니다. 이 블로그 게시물은 @Input() 및 @Output 데코레이터의 맥락에서 참조로 전달되는지 전달 값을 전달하는지 설명하는 것을 목표로 합니다.

먼저 아래 나열된 두 가지 Angular 구성 요소가 있다고 가정해 보겠습니다.

import { Component, Input } from '@angular/core';
@Component({
    selector: 'app-video',
    template: `
        {{data.counter}} {{count}}
     `
})
export class VideoComponent {
    @Input() data: any;
    @Input() count: number;
}

보시다시피 두 가지 입력 속성이 있습니다.

1. 데이터 속성에서 객체를 전달합니다.
2. count 속성에서 숫자를 전달합니다.

AppComponent에서 아래와 같이 두 속성에 대한 값을 전달합니다.

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `
  <app-video [data]='data' [count]='count' ></app-video>
  `
})
export class AppComponent implements OnInit {
    data: any = {};
    count: number;
    constructor() {
    }
 
    ngOnInit() {
        this.data.counter = 1;
        this.count = 1;
    }
}

보시다시피 데이터 (객체)와 카운트 (숫자)를 자식 구성 요소에 전달하고 있습니다. 데이터는 객체로 전달되므로 "참조로 전달"되고 count는 숫자로 전달되므로 "값으로 전달"됩니다.

따라서 객체, 배열 등을 전달하는 것은 Pass by Reference이고 number와 같은 기본 유형의 경우 Pass by Value입니다.

이를 더 잘 이해하기 위해 아래 목록과 같이 하위 구성 요소에서 두 개의 이벤트를 발생시켜 보겠습니다.

import { Component, Input, EventEmitter, Output } from '@angular/core';
@Component({
    selector: 'app-video',
    template: `
        {{data.counter}} {{count}}
        <button (click)='senddata()'>send data</button>
        <button (click)='sendcount()'>send count</button>
     `
})
export class VideoComponent {
 
    @Input() data: any;
    @Input() count: number;
 
    @Output() dataEvent = new EventEmitter();
    @Output() countEvent = new EventEmitter();
 
    senddata() {
        this.dataEvent.emit(this.data);
    }
    sendcount() {
        this.countEvent.emit(this.count);
    }
}

두 이벤트 모두 동일한 @Input() 데코레이션 속성을 부모 구성 요소에 다시 전달합니다.  dataEvent에서 데이터는 다시 전달되고 countEvent에서는 count가 상위 구성 요소로 다시 전달됩니다.

상위 구성 요소에서는 아래와 같이 이벤트를 캡처합니다.

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `
  <app-video [data]='data' [count]='count' (dataEvent)='updateData($event)' (countEvent)='updateCount($event)' ></app-video>
  `
})
export class AppComponent implements OnInit {
    data: any = {};
    count: number;
    constructor() {
    }
 
    ngOnInit() {
        this.data.counter = 1;
        this.count = 1;
    }
 
    updateData(d) {
        d.counter = d.counter + 1;
        console.log(this.data.counter);
    }
 
    updateCount(c) {
        c = c + 1;
        console.log(this.count);
    }
}

updateData 및 updateCount 함수에 대해 이야기해 보겠습니다. 이러한 함수는 자식 구성 요소에서 발생한 이벤트를 캡처합니다.

updateData 함수에서는 전달된 매개변수의 값을 증가시키지만 객체이기 때문에 this.data의 값을 업데이트하고 하위 구성 요소에서 업데이트된 값이 렌더링됩니다.

updateCount 함수에서는 전달된 매개변수의 값을 증가시키지만 기본 유형이기 때문에 this.count 를 업데이트하지 않으며 하위 구성 요소에서는 영향을 미치지 않습니다.

버튼 클릭시 출력으로 데이터 값은 증가하지만 카운트 값은 증가하지 않습니다.

@Input() 데코레이터에서 객체를 전달하면 참조로 전달되고 기본 유형을 전달하면 값으로 전달된다는 점을 요약할 수 있습니다. 이 기사가 도움이 되었기를 바랍니다. 읽어 주셔서 감사합니다.

 이 게시물이 마음에 들면 공유해주세요. 또한Infragistics Ignite UI for Angular Components를 체크아웃하지 않았다면 체크아웃하십시오! 웹 앱을 더 빠르게 코딩하는 데 도움이 되는 30+ 재료 기반 Angular 구성 요소가 있습니다.