[Angular] 데이터바인딩2

 

리액트에서는 props라는 개념으로 데이터를 내려주고 올려주고가 가능했는데

앵귤러에서는 어떻게 시작을 해야할까.

 

버튼컴퍼넌트에서

 

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-buttons',
  templateUrl: './buttons.component.html',
  styleUrls: ['./buttons.component.css'],
})
export class ButtonsComponent implements OnInit {
  @Output() clickEvent = new EventEmitter();

  constructor() {}

  start() {
    this.clickEvent.emit();
  }

  ngOnInit(): void {}
}

<p>
  <button class="start-btn" (click)="start()">시작</button>
  <button class="stop-btn">멈춤</button>
  <button calss="reset-btn">리셋</button>
</p>

버튼에서 버튼을 누르면 start함수가 실행됨 start함수에 clickEvent.emit이라는 것을 실행시키고

 

섹션인 부모컴퍼넌트에서

 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-section',
  templateUrl: './section.component.html',
  styleUrls: ['./section.component.css'],
})
export class SectionComponent implements OnInit {
  constructor() {}

  startTime() {
    console.log('섹션 컴포넌트가 잘받았다');
  }

  ngOnInit(): void {}
}


<div class="title">
  <div class="display">
    <app-time-display></app-time-display>
    <app-buttons (clickEvent)="startTime()"></app-buttons>
  </div>
</div>

 

clickEvent라는게 실행되면 startTime이 발동하고 그러면 섹션컴포넌트가 잘받았다가 실행이된다.

 

 

이제 부모데이터에서 자식데이터인 time-display로 전달을 해줘야하는데

 

import { Component, Input, OnInit, SimpleChange } from '@angular/core';

@Component({
  selector: 'app-time-display',
  templateUrl: './time-display.component.html',
  styleUrls: ['./time-display.component.css'],
})
export class TimeDisplayComponent implements OnInit {
  @Input() inputData: string | undefined;

  test = 1;

  constructor() {
    setInterval(() => {
      this.test++;
    }, 1000);
  }

  ngOnChanges(changes: SimpleChange) {
    console.log(changes);
    for (let propName in changes) {
    }
  }

  ngOnInit(): void {}
}

 

time-display컴포넌트에는

 

inputData가 @Input에 연결되어있는데

 

<div class="title">
  <div class="display">
    <app-time-display [inputData]="present"></app-time-display>
    <app-buttons (clickEvent)="startTime($event)"></app-buttons>
  </div>
</div>


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-section',
  templateUrl: './section.component.html',
  styleUrls: ['./section.component.css'],
})
export class SectionComponent implements OnInit {
  present = 'welcome';

  constructor() {}

  startTime($event: any) {
    this.present = $event;
  }

  ngOnInit(): void {}
}

부모 섹션에서는 inpuData = "present"로 연결되어있다.

 

---

 

다시 처음부터 데이터 흐름을 정리해보자면 

 

버튼컴포넌트에서 버튼을 누르면

 

클릭이벤트가 change를 내뱉는다. 

<p>
  <button class="start-btn" (click)="start()">시작</button>
  <button class="stop-btn">멈춤</button>
  <button calss="reset-btn">리셋</button>
</p>


import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-buttons',
  templateUrl: './buttons.component.html',
  styleUrls: ['./buttons.component.css'],
})
export class ButtonsComponent implements OnInit {
  @Output() clickEvent = new EventEmitter();

  constructor() {}

  start() {
    this.clickEvent.emit('change!');
  }

  ngOnInit(): void {}
}

 

그안의 Output()은 부모컴포넌트로 올라가게하는것

그렇다면 섹션컴포넌트로 가보면

 

<div class="title">
  <div class="display">
    <app-time-display [inputData]="present"></app-time-display>
    <app-buttons (clickEvent)="startTime($event)"></app-buttons>
  </div>
</div>

버튼 컴포넌트의 clickEvent가 startTime을 호출하게된다.

 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-section',
  templateUrl: './section.component.html',
  styleUrls: ['./section.component.css'],
})
export class SectionComponent implements OnInit {
  present = 'welcome';

  constructor() {}

  startTime($event: any) {
    this.present = $event;
  }

  ngOnInit(): void {}
}

이 startTime은 present의 값을 자식 컴포넌트로 부터 받은 값으로 할당시켜주는 역할을 한다.

이 값이 바뀌면서

 

present의 mapping이 되던 아래의 inputData로 흘러들어가게된다.

 

<div class="title">
  <div class="display">
    <app-time-display [inputData]="present"></app-time-display>
    <app-buttons (clickEvent)="startTime($event)"></app-buttons>
  </div>
</div>

inputData는 변화가 생기고 

console.log가 찍히게된다. => ngOnChanges부분

import { Component, Input, OnInit, SimpleChange } from '@angular/core';

@Component({
  selector: 'app-time-display',
  templateUrl: './time-display.component.html',
  styleUrls: ['./time-display.component.css'],
})
export class TimeDisplayComponent implements OnInit {
  @Input() inputData: string | undefined;

  test = 1;

  constructor() {
    setInterval(() => {
      this.test++;
    }, 1000);
  }

  ngOnChanges(changes: SimpleChange) {
    console.log(changes);
    for (let propName in changes) {
    }
  }

  ngOnInit(): void {}
}