IT 회사에서 즐겁게 지내기!

html과 ts파일 간 바인딩을 살펴보고 있는데요.

지금까지는 단방향의 바인딩을 사용해보았습니다.

요약하면 아래 3가지네요.

{}: String Interpolation 

[]: Property Binding 

(): Event Binding 

이번에는 양방향 데이터 바인딩을 보겠습니다.

ngModel 이라는 directive를 이용하는 건데요.

생소한 용어가 2가지 있습니다.

ngModel은 html과 ts가 양방향으로 묶여있다는 개념입니다.

사용 예시를 보면서 좀 더 설명하구요.

directive는 나중에 자세히 다뤄보겠습니다.

ngModel을 사용하기 위해서는 FormsModule이 필요합니다.

import { FormsModule } from '@angular/forms';

@NgModule({
    ...,
    imports: [ 
        FormsModule
    ],
    ...
})
export class AppModule { }

위와 같이 app.module.ts 파일에 이를 명시해주도록 하죠. 

(불필요한 코드는 생략하고 추가된 코드만 넣었습니다.)

그리고 html 파일에 ngModule을 이용하기 위한 코드를 추가하겠습니다.

<h3>My Budget: ₩{{budget}}</h3>
<input type="text" [(ngModel)]="budget">
<button (click)="onAddIncome()">Add Income</button>

위 코드에서 중요한 부분은 [(ngModel)] 입니다.

일명 banana syntax 라고 하는 [()]로 ngModel을 감싸줍니다.

결과 화면은 아래와 같습니다.

ngModel을 활용한 바인딩

위와 같이 html의 input 값이 바뀌면 ts의 budget 값이 바뀝니다.

마치 html과 ts의 값이 바로 엮여있는 듯한 느낌이 들죠.

하지만 엄밀히 말하면 양방향 바인딩은 존재하지 않습니다.

내부적으로 프로퍼티 바인딩과 이벤트 바인딩을 쓰죠.

[(ngModel)]은 내부적으로 아래와 같이 동작합니다.

[ngModel]="budget", (ngModelChange)="budget =$event"

양방향 바인딩은 개발 편의를 위한 syntax라고 봐야겠죠.

진행하고 있는 코드는 github에서 자유롭게 볼 수 있습니다.

소스주소: https://github.com/jsrho1023/account-book

얼마 전 점심 시간 식사하러 가는 길이었습니다.

사무실부터 엘리베이터를 지나 식당까지 스마트폰을 보고 있었지요. 

회사 선배분이 걱정 어린 한 마디 하십니다.

"야~ 스마트폰 그만 봐 눈나빠져."

"안그래도 매일 컴퓨터 앞에 앉아있는데.."

문득 생각이 드는 의문점.

스마트폰을 보면 정말로 눈이 나빠질까?

스마트폰 아니더라도 눈은 계속 사용합니다.

책을 보거나 컴퓨터를 사용하는 것 처럼 말이죠.

책과 스마트폰이 무엇이 다를까요?

안구건조증 환자 수 증가 추이

위 데이터를 보면 확실히 안구건조증이 증가하고 있습니다.

물론 안구건조증을 유발하는 요인은 많은데요.

스마트폰도 그 중 하나라고 전문가들은 이야기합니다.

스마트폰 화면이 눈에 직접적으로 병을 유발하는 건 아닙니다만.

스마트폰을 사용하는 습관이 눈에 좋지 않은 영향을 줄 수 있습니다.

즉, 스마트폰을 보면 정말로 눈이 나빠질까?

결론은 스마트폰 사용 습관으로 인해 나빠질 수 있다.

스마트폰의 작은 화면에 장시간 집중하여 눈의 근육이 약해지구요.

스마트폰에 집중하면서 눈 깜빡임이 줄어듭니다.

근육이 약해지면서 노안이 오고, 눈 깜빡임이 줄어 건조해집니다.

스마트폰 사용 습관을 달리하여 눈의 건강을 지킬 수 있습니다.

눈을 의식적으로 자주 깜빡이고, 자주 눈에 휴식을 취해줍니다.

먼 곳을 보거나 눈을 감는 등으로 말이지요.

눈 뿐만 아니라 스마트폰을 보며 걷다가 다치기도하니 주의하세요!

편리함을 가져다주는 스마트폰 조심할 점도 있다는 걸 기억하세요!

정보출처:

사이언스 타임즈

아주대병원

파이낸셜타임즈 (의학, 과학)

이번에는 이벤트 바인딩에 대해서 알아보겠습니다.

데이터 바인딩은 ts파일의 변수를 html 에서 이용하는 것이었죠.

이번 바인딩은 html의 이벤트를 ts파일의 메소드와 연결하는 것입니다.

<h3>My Budget: ₩{{budget}}</h3>
<input type="text" [value]="budget">
<button (click)="onAddIncome()">Add Income</button>

여기서 중요한 부분은 click 이벤트를 ( ): Event Binding 으로 감싼 것입니다.

click 이벤트를 ts의 onAddIncome() 라는 메소드와 연결해준 것이죠.

당연히 ts 파일에는 onAddIncome() 메소드가 있어야겠죠?

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

@Component({
    selector: 'app-budget',
    templateUrl: './budget.component.html',
    styleUrls: [ './budget.component.css' ]
})
export class BudgetComponent implements OnInit{
    budget: number = 1000;
    ngOnInit(){ }
    onAddIncome(){
      this.budget += this.budget;
    }
}

자동으로 budget 이 올라가는 타이머 코드는 삭제하구요.

ts 파일에 onAddIncome() 메소드를 만들어줍니다.

input에 써있는 값 역시 budget이므로 그만큼 더해지도록 합니다.

이렇게하면 버튼을 클릭할 때마다 budget이 2배가 됩니다.

이벤트 바인딩 동작화면

아주 쉽게 ts 파일의 메소드를 html에서 호출하는 것을 볼 수 있습니다.

이벤트 발생시 활용해야하는 값이 있다면 $event를 변수로 받을 수 있는데요.

활용은 다음 기회로 남겨두도록 하겠습니다.

소스주소: https://github.com/jsrho1023/account-book