[ionic angular] 데이터 바인딩

Ionic angular로 개발한지 어언 5개월,,

어쩌다보니 이 마이너스택을 꽤나 잘하게 되었다..

 

자료가 없어서 고통받으실 누군가를 위해 적어봅니다. 

전문적인 프론트 개발자는 아닌지라 용어는 좀 틀릴 수 있습니다. 

 

우선 ionic 에서 view에서 component.ts 파일로 데이터를 받아오고 싶을때 두가지 방법이 존재한다.

 

1. onChange() onFocus() 등 emit을 이용한 단방향 바인딩

2. [(ngModel)] 을 통한 데이터 양방향 바인딩 

 

사용법을 알게 되고, 코드를 짜다보면 상황에 맞게 더 좋은 방법이 있다. 

하나씩 설명해 보도록 하겠다. 

 

 

1. ionChange() ionFocus() 등 emit 을 감지하여 값을 받아옴 

ionic 개발의 유일한 자료 창고 ionic docs에 사용하고자 하는 component를 검색하면

다음과 같이 해당 컴포넌트가 제공하고 있는 event를 확인할 수 있다.

가장 많이 쓰는건 ionChange이다. 

누군가가 해당 ion-input의 값을 변경하면 해당 html의 ts파일의 onChangeInput이라는 함수가 실행된다. 

 

example.html

   <ion-input
    type="number"
    (ionChange)="onChangeInput($event)"
  ></ion-input>

 

example.component.ts

 async onChangedInput(e) {
	console.log(e)
    this.inputValue = e.value;
  }

 

 

2.  [(ngModel)] 을 통한 데이터 양방향 바인딩 

ngModel을 사용하면 ts파일에 public으로 선언한 전역 변수를 그대로 가져다 쓸 수 있다.

 

example.html

   <ion-input
      type="text"
      [(ngModel)]="itemInfo"
   ></ion-input>

 

example.component.ts

export class ExampleComponent implements OnInit {
  public itemInfo;
  
  
  ....
  
  }

 

 

이런식이면 itemInfo 변수를 이용하여 ion-input을 통해 받는 값을 컨트롤 할 수 있다.

이방법의 장점은 input 폼에 미리 데이터를 세팅하고 싶을 때 사용할 수 있다. ( 저장된 유저의 주소같은거 ) 

 

 

 

당연히 2번의 ngModel을 이용한 양방향 바인딩이 훨씬 쉽고, 간단하다.

그러나 화면 초기에 placeholder 를 보여주어야 하거나 input에 따라 실시간으로 값을 validation해야 하는 경우에는 ngModel을 통해 해결할 수 없는 상황이 온다. 

이럴때는 약간은 귀찮지만 ionic 컴포넌트가 제공하는 emit 기능을 사용해야 한다.

 

상황에 맞게 데이터 바인딩 방법을 선택하시길!