[Angular-04]angular component

JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.

기초지식은 다른 강의를 참조하도록 하라.

또한 Angular에서는 JavaScript로 번역되는 TypeScirpt라는 새로운 언어를 사용한다.

이 언어는 JavaScript에 Type을 추가한 언어로 좀더 객체지향적인 설계가 가능한 언어이다.

이 언어에 대해서 조금씩의 설명은 있겠지만 자세한 설명은 다루지 않을 계획이다.

필자는 아직 이 TypeScript를 강의로 제공할 생각이 없으므로 자세히 알고싶다면

https://www.typescriptlang.org/

를 참조하라.

이제 본격적으로 한꺼풀씩 벗겨 나가보도록하자.

이번에는 angular 컴포넌트에 대해서 알아보도록하자.

컴포넌트는 angular에서 가장 작은 단위라고 하였다.

이 컴포넌트가 모여서 하나의 모듈이 된다. 모듈들은 모여도 모듈이다.

아직 모듈에 대해서 잘 알필요는 없다. 사실 컴포넌트가 모여서 모듈이 된다는것만 알면 모듈에 대해서는 깊게 알필요도 없다.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

angular프로젝트를 만들면 자동으로 만들어 져있는 app.component.ts코드이다.

우리는 이 코드의 구성에 대해서 알아보며 또한 typescript의 문법에 대해서도 일정부분 설명하고 넘어가겠다.

먼저 typescript에 대해서 설명하도록 하겠다.

import - 우리가 흔히 아는 그 import 맞다. 외부의 라이브러리를 임포트한다는 뜻이다.

@Component - @뒤에 오는것은 자바로 따지면 애너테이션을 의미하며 파이썬은 데커레이터를 의미한다. 타입스크립트에서는 데커레이터를 의미하게 된다. 파이썬을 써본 사람은 알겠지만 데커레이터는 클래스나 함수를 수식해주는 역할을 하게 된다. 여기서는 Component라는 데커레이터를 AppComponent에 부착한 것이다.

export class - java에도 외부 클래스는 두종류로 public클래스와 package클래스가 존재하며 여기서의 export 클래스는 자바로 따지면 public클래스와 동일하다. 자바를 모르는 사람들을 위해서 설명을 하자면 이 소스코드 외부에서 필자가 만든 클래스를 쓰고싶다면 export라는 키위드가 필요하다.

이제 typescript의 기초적인 문법을 알았다.

그러면 이 코드가 무엇을 의미하는지 보도록하자.

selector - 우리가 아는 그 css셀렉터가 맞다. css셀렉터는 필자가 다루지 않으므로 다른 강의를 확인하라.

templateUrl - 우리가 사용할 템플릿 url을 의미한다. 기본적으로 밖에 자동으로 만들어진 app.component.html을 의미한다.

styleUrls - 우리가 사용할 css의 url을 의미한다. 기본적으로 밖에 자동으로 만들어진 app.component.css와 연결된다.

title - 이는 쉽게말하면 그냥 선언한 변수이다. title이라는 이름의 변수를 선언했는데 이를 클래스단에 선언했으므로 이 변수는 public title인 속성인 것이다. 이 속성을 새로 만들고 app이라는 값으로 초기화 해 주어라는 뜻이다.

template과 style은 외부 파일과 연결되어 있지만 만약 내용이 많지 않다면 내부에 코드로 적는 것도 가능하다.

아래 예제를 보도록하자.

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

@Component({
  selector: 'app-root',
  template: '' +
  '<h1 mine-h1>My name is {{name}}</h1>' +
  '<p>hi~!</p>' +
  '<p mine-p>This is my firsts {{title}}!</p>',
  styles: ['[mine-h1]{color: royalblue}', 'p[mine-p]{color: salmon}'],
})
export class AppComponent {
  name = 'kukaro';
  title = 'Angular';
}

필자가 입맛에 따라 변경한 예제이다. templateUrl은 외부의 파일과 연결해준다.

만약 파일로 만들기 싫다면 template를 사용하면 된다. 그리고 내부에 문자열로 선언해 준다.

css역시 마찬가지 이다. 만약 외부의 css를 사용하기 싫다면 styleUrls가 아니라 styles를 선언해줘서 넣어주면 된다.

위의 예제코드는어떤 의미일까? 먼저 selector부분부터 보도록 하자.

selector를 보면 app-root라는 태그를 선택한다고 되어있다. 반드시 태그일 필요는 없다.

이 selector는 css 셀렉터를 의미하므로 특정 클래스나 엘리먼트, id를 찝어서 사용하는 것 역시 가능하다.

여기서는 app-root라는 태그를 선택했다.

template을 보면 {{}}로 감싸진 부분이 보일 것이다.

뒷장에 또 설명하겠지만 이 {{}}괄호로 감싸진 영역을 interpolation이라고 부른다.

이 부분은 아래의 변수로 치환된다. 여기서 말하는 변수는 class내부에 선언한 속성들을 의미한다.

마지막으로 style에 있는 css를 선택해서 각각의 css를 적용시켜준다. mine-h1이라는 속성을 찝어서 royalblue색을 입힌다.

한번 실행시켜보자.

제대로 실행됬음을 확인할 수 있다.

이렇게 component는 html,css,js를 작은 컴포넌트로 감싸서 하나의 단위로 만든다.

그리고 그걸 적용시켜서 필요한데 사용할 수 있다.