앵귤러 튜토리얼 (Angular tutorial) -11

* 제가 다시 작성한 최신 튜토리얼 수정본 입니다. 아래 주소를 통해서 진행하시는 것을 권장 드립니다. ^^

lts0606.tistory.com/328

앵귤러 튜토리얼(Angular tutorial) - 1

 

이번시간에는 메인 컴포넌트로부터 넘어온 데이터를 처리하는 방법에 대해 살펴보자.

앞시간에서 3개의 컴포넌트를 만들었다.

중심역할을 하는 메인컴포넌트(app.component.ts), 머리 역할을 하는 헤더 컴포넌트(head.component.ts), 내용을 보여주는 바디 컴포넌트(app.component.ts)로 구성 하였다.

 

컴포넌트에서 다른 컴포넌트로 데이터 및 이벤트를 전달하려면 @Output이라는 데코레이터를 활용했었고,

해당 이벤트를 받는 부분은 @Input 데코레이터를 사용하였다.

여기까지의 내용이 이해가 되지 않는다면 이전 페이지에서 다시 한번 확인 해 볼 필요가 있다.

 

그럼, 이제 바디컴포넌트를 살펴보자. 바디컴포넌트에서는 데이터를 받는게 되었는데..문제가 있다.

//..생략
export class BodyComponent implements OnInit { 
    @Input() private getShowType : any;  //여기서 받는건 되었는데..

    //..생략
}

 

getShowType이라는 변수로 데이터를 받는건 되었는데..화면에 표출하는 값은 구분값인 A와 B만 표출하기 때문에 어떠한 동작을 정의할 수 없게 되었다.

단순히 A와 B만 표출하는 형태면 상관없는데, 어떠한 게시글을 보여주는 형태가 되어야 하므로 코드수정이 필요해 보인다.

이를 위해 set과 get이라는 문법을 사용해 보겠다.

set과 get이라는 문법에 대해 살펴보자. 아래 코드는 자바스크립트로 만들어진 코드이다.(익스플로러에서는 동작이 안된다)

var data = 'abcd';
var method = {
    changeData : function (arg){  
       data = arg;
    }
}
method.changeData('first'); //일반적인 자바스크립트에서 함수 사용 모습
console.log(data);


data = 'abcd';
method = {
    set changeData(arg){ //set 문법을 사용한 모습
       data = arg;
    }
}
method.changeData  = 'second';  //메소드형태가 아니라 변수에 데이터를 넣는 형태로 사용됨
console.log(data);

method = {
    get getData(){  //위와 동일한 형식의 get 문법
       return data;
    }
}
console.log(method.getData);  //function임에도 불구하고 소괄호가 없다.

 

위의 문법 비교를 살펴보면 set이라는 setter 문법을 통해서 데이터가 단순하게 대입연산자(=)를 통해서 들어가는 것을 볼 수 있다. 마찬가지로 get이라는 함수도 일반 변수를 사용하듯이 소괄호 없이 사용되는 모습을 볼 수 있다.

위 문법은 ES6에 기반한 문법으로, 타입스크립트 기반의 앵귤러도 동일하게 사용 할 수 있다.

 

위 문법을 소개한 이유는 해당 문법을 사용하면 단순히 데이터를 SET하는 것이 아니라 함수에 데이터를 넣는 모습으로 바꾸기 쉽기 때문이다.

말이 어려우므로 바디 컴포넌트를 수정한 코드를 살펴보자.

import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';
@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.css']
})
export class BodyComponent implements OnInit {

  @Input() set getShowType(arg : any){  //SET 문법
    console.log('arg : '+arg);  //메인컴포넌트로부터 넘어온 데이터  
  }

  constructor() { }

  ngOnInit() {

  }
}

 

기존의 getShowType은 일반 변수였는데 여기서는 메소드 타입으로 변경이 되었다.

메인컴포넌트에서 데이터를 넘겨줄 때 set문법에 의해 단순하게 대입연산자로 입력이 가능 하도록 바꾼 것이다.

이렇게 되면 A와 B 값을 단순하게 표출하였던 기능이 이제는 넘어온 데이터에 대해 각종 행위(조건문, 반복문 등)를 독립적으로 할 수 있게 된 것이다.

 

물론 set문법 말고도 데이터가 변하는 행위를 감지하는 기능이 OnChanges라는 인터페이스를 상속받는 방법이 있다. 아래코드를 보자.

import { Component, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Input } from '@angular/core';
@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.css']
})
export class BodyComponent implements OnChanges, OnInit {  //OnChanges를 상속해야 한다.

  @Input() private getShowType : any;  //기존에 사용하던 모습

  ngOnChanges(changes: SimpleChanges) {  //변하는 데이터를 추척 해 주는 함수
    console.log('value: ', changes);
  }
  constructor() { }

  ngOnInit() {

  }


}

 

물론 해당 방법대로 하는것도 나쁘지는 않다.

OnChanges를 활용하면 변하는 데이터에 대한 행위추적이 가능 해 지는데, 여기서는 조금 더 쉽게 set 문법을 활용한 방법으로 진행하겠다.

마지막으로 조건문을 달아서 이제 데이터를 표출 할 준비를 해여주자.

import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';
@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.css']
})
export class BodyComponent implements OnInit {

  @Input() set getShowType(arg : any){  //set 문법
    console.log('arg : '+arg);    //서버로 넘어온 데이터
    if(arg =='A'){
       console.log('사용자 목록 나와주세요');
    }else {
       console.log('게시글 목록 나와주세요');
    }
  }

  constructor() { }

  ngOnInit() {

  }

}

 

여기까지 완료하였다면 이제 넘어온 데이터에 따른 바디 컴포넌트가 독립적으로 행위를 할 수 있게 제작된 것이다.

데이터를 표출하는 것은 일단 잠시 남겨두고, 다음시간에는 공용으로 사용 할 데이터 또는 함수 사용법에 대해서 알아보도록 하자.

 

app.zip

0.01MB