앵귤러 튜토리얼(Angular tutorial) - 8 : 컴포넌트, 모듈

컴포넌트와 모듈과의 개념에 대해서 어느정도 이해가 되셨는지요?
이번시간에는 컴포넌트의 개념을 좀 더 알아보기위해서 간단한 기능을 만들어보려고 합니다.
바로 로그인을 하면 특정 페이지로 이동하는 기능입니다!

물론 데이터베이스와의 연동부분은 아직 없지만, 기본적인 틀과 개념에 대해서 살펴보려 합니다.

이전시간에 새로 만든 컴포넌트는 hello컴포넌트, world 컴포넌트 2개가 존재 하였습니다.
물론 app컴포넌트(app.component.ts 입니다.)도 있었습니다.

 

app모듈의 내용에 아래 내용으로 수정합니다. (app.module.ts입니다.)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';  //새롭게 추가된..?

import { AppComponent } from './app.component';
import { HelloComponent } from './hello/hello.component';
import { WorldComponent } from './world/world.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent,
    WorldComponent
  ],
  imports: [
    BrowserModule, FormsModule  //등록..?
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

새로 추가한 내용을 자세히 살펴보면 이름 자체가 00모듈인 FormsModule입니다.

FormsModule에서 주로 사용하게 될 ngModel 디렉티브는 데이터를 input 형식의 테그에 묶어줄 때 사용되어집니다.

 * 디렉티브에는 ngIf, ngFor등을 살펴보았었습니다!
input 형식의 테그의 데이터를 손쉽게 관리하는 개념이라고 생각하시면 될 것 같습니다.

 

위 내용처럼 import를 통해 내가 사용하고자 하는 외부 모듈의 경로를 가져온 다음에, imports라는 항목에 사용하고자 하는 모듈의 이름을 입력하는 것이 바로 모듈에서 외부 모듈을 사용하는 기초 방법 입니다.

간단하게 설명하면, 외부 라이브러리를 사용하는 방법이라 볼 수 있습니다.

 

우리가 사용하게될 외부 모듈(라이브러리)이 어떠한 역할을 하는지 계속해서 알아보겠습니다.

다음으로 로그인을 담당할 app컴포넌트를 수정하겠습니다.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  id : string;
  pwd : string;  
  visible1 : boolean = false;
  visible2 : boolean = false;

  tryToLogin() : void{
    console.log(this.id, this.pwd);
  }
}

 

id, pwd라는 변수는 문자로 선언하였습니다.

visible로 시작하는 2개의 변수는 boolean값으로 기본값을 false로 설정 하였습니다.

그리고 app컴포넌트의 html파일을 아래처럼 수정하여줍니다.

<div>Wellocome</div>
<input type="text" placeholder="id" [(ngModel)]="id"/>
<input type="text" placeholder="password"  [(ngModel)]="pwd"/>
<button (click)='tryToLogin()'>Login</button>


<app-hello *ngIf="visible1"></app-hello>
<br>
<app-world *ngIf="visible2"></app-world>

 

[(ngModel)]이라는 기호가 보입니다.
ngModel은 디렉티브의 일종으로 input type의 데이터를 묶을 때 사용됩니다.
앱 컴포넌트에서 우리는 id와 pwd라는 변수를 만들었습니다.
그 변수값을 html에서 대입시켜주기 위한 방법으로 생각하면 될 것 같습니다.

더이상의 자세한 설명은 생략한다!
한번 실제로 구동해보면 어떠한 내용인지 알 수 있습니다.
ng serve 명령어를 통해서 동작시켜 봅니다.

"아이디" 와 "비밀번호"를 각각 입력해서 버튼을 눌러보았습니다!

 

"아이디", "비밀번호"를 각각 input창에 입력후 login버튼을 누르니 사진처럼 결과가 나온것을 볼 수 있습니다.
input type의 value 값이 해당 id와 pwd라는 변수에 자동으로 들어가는 것을 확인 할 수 있습니다!
다시말해, 컴포넌트의 특정 변수와 컴포넌트html파일에서의 값을 이어주는 역할을 하는 것이 바로 ngModel 디렉티브입니다.

 

이러한 ngModel이라는 디렉티브는 app모듈에서 FormsModule를 import해서 사용할 수 있게 되었습니다.

여기서 다시한번 더 알 수 있는 것은,

모듈에서는 다른 여러 기능들을 사용하기 위한 설정(setting!)의 역할을 한다는 것 입니다.

소위 "라이브러리"라고 불리우는 앵귤러의 대부분의 기능은 이렇게 모듈화가 되어 있습니다.

이러한 모듈을 사용하기 위해서는 마찬가지로 본인이 사용하는 모듈에서 사용하고자 하는 모듈을 정해진 방식에 맞추어 불러오는 것 입니다.

 

일단 우리는 아직 익숙하지 않으므로 당분간 1개의 모듈만 사용하겠습니다!

모듈은 컴포넌트를 관리한다고 하였습니다. 

또한 모듈은, 위 내용처럼 다른 모듈에서 사용될 수 있습니다.

위 2가지 내용만 알고 넘어가면 됩니다!

 

내용이 역시나 어렵습니다..ㅠ

이해가 되지 않는다면 여러번 내용을 살펴보아야 합니다.

 

자, 다시 컴포넌트 파일을 살펴보겠습니다.

ngModel 디렉티브를 사용하게 되므로써 우리는,
제이쿼리나 javascript를 통해서 매번 value를 가져오는 방식에서 벗어날 수 있게 되었습니다.

 * 이런 방법이 이제 필요 없습니다 : $(data).val(), document.getElementBy...

왜냐하면 해당 id와 pwd에 데이터가 자동으로 들어가기 때문 입니다.

app컴포넌트의 tryToLogin 함수를 조금 수정하여 보겠습니다.

  tryToLogin() : void{
    console.log(this.id, this.pwd);
    if(this.id =='admin' && this.pwd == '1234'){
      this.visible1 = true;
    } else if(this.id =='root' && this.pwd == '1234'){
      this.visible2 = true;
    }     
  }

 

admin, 1234의 텍스트이면 visible1이라는 변수를 true로 만들었습니다.
root, 1234의 텍스트이면 visible2이라는 변수를 true로 만들었습니다.
해당 부분을 ajax처럼 서버에게 데이터를 요청해서 받아오는 방식으로 바꾼다면 실제 데이터베이스와의 사용도 가능해질 것 입니다.
이제 아이디 admin과 비밀번호 1234를 통해서 로그인 버튼을 눌러봅니다.

오...값 일치여부에 따라 컴포넌트가 보이게 되었습니다.

 

새로고침을 누른뒤에 아이디 root와 비밀번호 1234를 입력하여봅니다.

각각의 컴포넌트가 잘 나오는군요!

 

여기까지 하였다면 벌써 우리는 로그인을 통한 화면이 전환되는 기능을 완성하게 되었습니다.
조금 더 그럴싸해 보이도록 로그인 역할이 성공하면 id와 pwd를 입력 하지 못하도록 바꾸어 보겠습니다.
app컴포넌트를 수정합니다.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  id : string;
  pwd : string;  
  visible : boolean = true;
  visible1 : boolean = false;
  visible2 : boolean = false;

  tryToLogin() : void{
    console.log(this.id, this.pwd);
    if(this.id =='admin' && this.pwd == '1234'){
      this.visible = false;
      this.visible1 = true;
    } else if(this.id =='root' && this.pwd == '1234'){
      this.visible = false;
      this.visible2 = true;
    }     
  }
}

app컴포넌트의 html파일을 수정합니다.

<div  *ngIf="visible">
    <div>Wellocome</div>
    <input type="text" placeholder="id" [(ngModel)]="id"/>
    <input type="text" placeholder="password"  [(ngModel)]="pwd"/>
    <button (click)='tryToLogin()'>Login</button>
</div>
<app-hello *ngIf="visible1"></app-hello>
<app-world *ngIf="visible2"></app-world>

 

그리고나서 이제 로그인을 시도하여보면 로그인 입력창이 사라지면서 화면이 이동되는 효과를 볼 수 있게 되었습니다.
데이터를 묶어주는 ngModel 디렉티브와, if 구조지시자만 사용하였을 뿐인데 제법 그럴싸한 기능이 완성되었습니다!
앵귤러에서의 컴포넌트가 왜 다수가 필요한지에 대해 살펴보기위해 간단한 로그인 기능을 만들어 보았습니다.

페이지가 이동하는 기능이 제법 그럴싸하게 완성되었습니다!

벌써 앵귤러의 가장 어려운 부분이 끝났습니다.
여기까지의 내용이 이해가 되었다면 큰 고비(?)는 넘긴 것 같습니다.

이번장의 내용을 정리하여 보겠습니다.
1. 모듈은 다른 모듈을 사용할 수 있게 하여줍니다.
2. 모듈에서 다른 모듈을 import하는 개념은 javascript에서 다른 js를 사용하기 위해 <script src='대상'> 과 하는 동일한 역할입니다.
3. 이를 통해 알 수 있는 것은 모듈은 소위 말하는 "외부라이브러리" 를 사용하기 위한 설정의 장소입니다.
4. ngModel이라는 디렉티브(지시자)는 컴포넌트의 변수에 데이터를 넣어줄 때 사용됩니다.
5. 마찬가지로 컴포넌트의 변수값이 변하게 되면 ngModel 디렉티브에 묶인 데이터도 변하게 됩니다.
 * 컴포넌트에서 id값을 아무렇게나 한번 입력해보세요!
6. if디렉티브는 논리값에 의해서 해당 html 엘리먼트를 보이거나 가리는 역할을 합니다.

 

저번시간에 이야기 하였지만, 가장 먼저 실행되는 모듈에서 가장 먼저 사용되는 컴포넌트는 대부분 중간다리 역할을 합니다.
여기서는 app모듈, app컴포넌트가 해당됩니다.
하지만 우리는 여기서 id입력창, password입력창, 로그인 버튼등을 만들어 주었습니다.
다음시간에는 이러한 부분을 조금 분리해 보도록 하겠습니다.

 

src.zip

0.01MB