앵귤러 튜토리얼(Angular tutorial) - 14 : 데이터 공유(Share, Inject)

저번시간까는 우리는 앵귤러의 기본구성형태, 컴포넌트 사용방법에 대해서 살펴보았습니다.
컴포넌트의 FormsModule 또는 ReactiveFormsModule사용법은 사실 쉽지가 않습니다.
여러번 연습하고 자주 사용해야 익숙해지는 부분들 입니다.

자 여기까지 내용을 잠깐 정리 해 보겠습니다.
앵귤러의 기본 구성형태는 모듈 + 컴포넌트의 형태로 이루어져 있습니다.
컴포넌트는 화면을 구성하는 기능을 담당하였습니다.
데이터를 "바인딩" 하는 방법을 컴포넌트에서 우리는 단순하게 데이터를 붙여주거나, FormsModule 또는 ReactiveFormsModule을 사용 해 보았습니다.
이러한 "바인딩" 방법으로 Dom 객체에 접근하지 않고 데이터를 화면에 표출하거나 가져올 수 있었습니다.

모듈에서 우리는 이러한 다양한 기능을 사용 할 수 있게 import를 통하여 외부 모듈을 참조하도록 하였습니다.

마치 Javascript에서의 <script src='blabla.com' /> 의 기능처럼 말이죠.

모듈에서 우리는 매번 imports 부분만 사용을 해 보았았습니다.
그래서 이번에 우리는 공유기법에 대해서 살펴보려 합니다.
자주 사용되는 대상, 정보 및 객체를 앵귤러는 마치 컴포넌트에 주사기로 넣어주듯(?)이 전달을 해 줄 수 있습니다.

자 그럼 이제 모듈파일을 먼저 수정하여보겠습니다.
* 프로젝트는 여전히 secondStudy 입니다!

* 대상 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

import {FormsModule} from '@angular/forms';
import { DashboardComponent } from './dashboard/dashboard.component'; 
import { ReactiveFormsModule } from '@angular/forms';  //반응형 폼?

declare type INFORMATION = {  //전달할 데이터 형식
  data1 : string,
  data2 : number,
  data3 : any,
};
const myData : INFORMATION = {  //내가 전달할 데이터
  data1 : 'data1',
  data2 : 1433,
  data3 : ['data3_1','data3_2']
};

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule, FormsModule  //imports를 통해서 다른 컴포넌트들이 해당 모듈의 기능을 사용할 수 있게 해 줍니다.  
    ,ReactiveFormsModule  //반응형 폼 사용
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

app모듈파일에서 특정 type에 맞추어 myData변수에 데이터를 넣어보았습니다.
여기까지는 어렵지 않습니다.
코드를 조금 더 깔끔하게 하려면 위 type으로 선언한 부분을 따로 파일로 만들어 관리 해 주도록 하겠습니다.
app 디렉토리까지 이동한 다음에 type과 관련된 ts파일을 만들어 줍니다.
* 경로 주의하여 주세요! app 디렉토리까지만 입니다!

MyType.ts 파일을 만들었습니다.

 

그리고 만들어둔 타입을 복사하여 붙여넣습니다.
그리고 export라는 명령어를 붙여서 외부에서 사용가능한 변수로 바꾸어 줍니다.
export를 사용하지 않으면 해당 파일에서만 사용되므로 주의하여 줍니다.

요렇게 기존에 있던 내용을 옮겼습니다.

 

그리고 기존 app모듈에서 참조하도록 import를 붙여서 대상을 가져와 줍니다.

app.module.ts에서 사용하는 모습입니다.

 

이제 해당 타입을 분리하므로써 다른 파일에서도 해당 타입을 사용할 수 있게 되었습니다.
타입스크립트 파일을 만든 뒤에 export를 활용하여 자주 사용하는 함수나 변수를 이처럼 분리해서 사용 할 수 있습니다.
그러면 이제 만들어 놓은 myData를 공유하는 기능을 붙여보겠습니다.

* 대상 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

import {FormsModule} from '@angular/forms';
import { DashboardComponent } from './dashboard/dashboard.component'; 
import { ReactiveFormsModule } from '@angular/forms';  //반응형 폼?

import {INFORMATION} from './MyType';

const myData : INFORMATION = {  //내가 전달할 데이터
  data1 : 'data1',
  data2 : 1433,
  data3 : ['data3_1','data3_2']
};

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule, FormsModule,ReactiveFormsModule
  ],
  providers: [
    {provide:'sending_name',useValue:myData}  //제공? 사용값??
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

프로바이더스 부분에 json형식으로 값이 추가가 되었습니다.
아직 잘 이해가 되지 않으므로 1가지 더 파일을 수정해 보도록 합니다.
login컴포넌트파일에 constructor부분을 아래처럼 수정합니다.

* 대상 login.component.ts

import { Component, OnInit, Input, Output, EventEmitter, Inject } from '@angular/core';  //Inject를 추가하여 줍니다.
import { INFORMATION } from '../MyType';  //새로만든 타입을 추가 해 줍니다.

//..생략

export class LoginComponent implements OnInit {
  //..생략
  constructor(@Inject("sending_name") my_type : INFORMATION) { 
    console.log(my_type);
  }
  //..생략
}

 

그리고 앱이 구동되면 login화면으로 가지 않도록 하였기 때문에 app컴포넌트 html파일에서 논리값 부분을 기존으로 되돌려 줍니다.

* 대상 app.component.html    (오탈자 수정하였습니다)

<app-login *ngIf="loginBool" [visible1]='loginBool' (sendMyEvent)="getEventThanks($event)"></app-login>
<app-dashboard *ngIf="boardBool"></app-dashboard> 

 

두근두근! 이제 앱을 실행하여 봅니다.  * 명령어 : ng serve

아니 이것은? 모듈에 등록했던 데이터??

 

app모듈에서 정의한 타입의 데이터가 넘어 들어온 것을 볼 수 있습니다.
처음에 우리가 app모듈에서 providers에 우리는 json 형식으로 데이터를 입력했습니다. 

* 형태 : {provide : 이름,useValue : 값}
여기서 provide라는 것은 값을 받을 이름, useValue는 매핑할 데이터를 의미 합니다.
app모듈이 전달한 이러한 데이터는 컴포넌트에서 생성자(constructor)를 통해서 받습니다.
데이터를 받을 때 Inject라는 데코레이터가 사용이 되며 소괄호에 provide를 통해 지어준 이름값을 입력하면 됩니다.

이러한 방식으로 모듈에서는 컴포넌트에게 모듈이 관리하는 데이터, 객체등을 전달할 수 있습니다.
우리가 외부 모듈을 사용하다보면 해당 모듈에게 필요한 정보를 전달해야 되는 경우가 발생합니다.
만약 providers를 통해서 내용을 전달하는 방식이 없다면 우리는 외부 모듈의 모듈.ts파일의 구조를 파악해서 내용을 수정해야 될 것 입니다.
이러한 경우를 방지하기 위해서 앵귤러에서는 모듈에서 다양한 객체와 정보를 providers를 통해서 받을 수 있게 되어 있습니다.

사실..위 내용만으로는 느낌이 잘 오지 않습니다!
중요한 점은 앵귤러의 모듈을 통해서 데이터, 정보 및 객체등을 컴포넌트가 쉽게 받을 수 있다는 점 입니다.
여기까지의 내용이 이해가 되었다면 다음장에서의 앵귤러의 멋진 기능을 만나보실 수 있습니다.
다음시간에는 위 내용을 토대로 우리가 이전에 만들어 보았던 Input과 Output으로 된 데코레이터 부분을 수정하여 보겠습니다.

src.zip

0.01MB