[Angular] 컴포넌트배치, 데이터바인딩1

 

웹 스톱워치 만들어보기.

 

컴포넌트 구조를 위와 같이 짜게 될것이다.

 

컴포넌트 생성시 이전에는 직접 넣어줬지만. ng generator component 을 통하여 필요한 컴포넌트를 만들 수 있다.

좀 더 줄이면

ng g c 원하는이름

 

app.component.html에 아래와같이 만든 후 

<app-header></app-header>

<app-section></app-section>

<app-footer></app-footer>

 

출력해보면 아래와 같이 나온다.

 

 

캡슐화가 된다. header component는 header component안에서. 모듈의 특징.

 

같은 컴포넌트를 꾸며주는데 헤더는 헤더, 섹션은 섹션

같은 class title을 사용하는데 

캡슐화가 잘 되어 있다.

 

그런데. 이 섹션 컴퍼넌트에

styleUrls에 section 부분말고 footer.component.css를 넣어주면? 배열이기에 그 속성도 적용된다. 

 

 

section안에

time-display와 buttons를 만들것이기에 

아래와같은 명령어를 통하여 컴포넌트를 만들어준다.

 

ng g c section/time-display

ng g c section/buttons

 

---

앵귤러에는 템플릿과 컴포넌트간의 데이터 바인딩을 할 수 있는 기법이있다.

 

time-display 컴포넌트의 ts파일로 가보면

아래와같은 기초적인 class가 있다.

 

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

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

  constructor() { }

  ngOnInit(): void {
  }

}

이 안에 

test = '시간값'을 넣어보자

 

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

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

  test = '시간값';

  constructor() { }

  ngOnInit(): void {
  }

}

이렇게 지정한뒤 

 

display의 html파일에 

 

아래와 같이 중괄호 두개 안에 test를 넣어보자

 

<p>
    {{test}}
</p>

 

실질적으로도 화면에 아래와 같이 그려진다.

 

템플릿과 컴포넌트간의 데이터 바인딩

이라는 개념이다.

 

데이터의 흐름은 컴포넌트 => 템플릿으로 단방향 바인딩 

 

아래와 같은 작업을 해준다면

 

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

@Component({
  selector: 'app-time-display',
  templateUrl: './time-display.component.html',
  styleUrls: ['./time-display.component.css'],
})
export class TimeDisplayComponent implements OnInit {
  test = 1;

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

  ngOnInit(): void {}
}

1초마다 test가 ++되어서 시간기능이 추가될 수 있게된다.

컴포넌트에서 값이 변화되고 템플릿을 계속 렌더링을 해준다. 

 

리액트같은경우 onclick={()=>{console.log("click")}} 작업을 통해 콘솔이 찍히게 나왔을것이다.

반면 앵귤러는?

 

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

소괄호를 통하여 click이벤트를 달아두고 test함수를 넣어주는데..

그 test함수는 

 

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

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

  test() {
    console.log('test');
  }

  ngOnInit(): void {}
}

ts파일에서 class를 통하여 만들어준것이다.

 

 

아래와같이 이벤트 바인딩을 해서 사용한다. 

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

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

  test($event: MouseEvent) {
    console.log($event);
  }

  ngOnInit(): void {}
}




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

여기서도 데이터는 단방향이다.