Categories
angular2 IT

[Angular2] Component

참고: angular2에 대한 연재는 여기를 참조해 주세요. 틀린 부분이나 의견, 피드백은 언제든지 환영합니다. 

들어가기

이제 본격적으로 Angular2에 대한 개념을 하나씩 살펴봅니다. 우리가 마주하게 될 Angular2의 첫 관문은 Component입니다. 이 글에서는 일반적인 의미의 컴포넌트(Angular2의 Component와 구분하고자 한글로 명칭합니다.) 개념을 짚어보고, 실제 Angular2에서 어떻게 Component를 생성하고 다루는지를 설명합니다.  읽으시는 분들의 상황에 따라 바로 내용으로 넘어가도 무방합니다.

컴포넌트 돌아보기

우리가 Angular를 사용해서 개발하고자 하는 것은 결국 하나의 웹 애플리케이션 입니다.  예를 들면 아래와 같은 할 일 목록 웹앱이 될 수 있습니다.

todo_list

위 스크린샷에서 페이지의 각 기능을 컴포넌트로 보고 나누면 여러 개의 컴포넌트들로 쪼개어질 텐데요. 물론 어디까지 최소 컴포넌트 단위로 볼지는 재사용성에 따라 달라지겠지요. 지금은 대략 아래처럼 푸른색 테두리로 구분된 컴포넌트들만 생각해 봅니다.

todo_list_cmp

위 스크린샷을 좀 더 구체적으로 컴포넌트 단위로 모델링하면 다음과 같은 트리를 그릴 수 있습니다.

component_tree

그림을 보니 전체 컴포넌트를 담을 Container 컴포넌트가 트리의 루트가 된 것을 알 수가 있네요. 그리고 바로 루트 밑에 위 스크린샷에서 푸른색 테두리 박스로 구분된 세 개의 컴포넌트 Header,  LNB, Todo List 컴포넌트가 자식으로 소속되어 있는 것을 볼 수 있습니다. 마지막으로  Todo List 컴포넌트 밑에 복수의 Todo 컴포넌트들이 역시 자식으로 있습니다.

앞으로 여러분들이 만들게 될 애플리케이션 역시 위에서 예시로 제시한 Todo List와 같이 여러 컴포넌트들로 구성된 하나의 트리가 될 겁니다. 이 부분을 꼭 유념해서 기억하면서 이제 실제로 어떻게 Angular2에서 Component를 만들지 함께 살펴봅시다.

 

Component

Component

Component는 화면에 그려질 뷰의 내용을 담고 있는 마크업, 뷰에 노출될 데이터 처리, 비즈니스 로직 및 이벤트 핸들러 선언 등을 하나로 통합하는 역할을 갖고 있는 angular의 요소입니다. 지난 글 QuickStart 따라하기 에서 만들었던 AppComponent을 예로 Component를 자세히 살펴봅시다.

예제의 AppComponent는 “My First Angular2 App”이라는 텍스트 컨텐츠를 보여주는 단순한 기능의 Component입니다. (방금 언급한 “기능”은 앞으로 spec이란 용어로 대체해서 사용하기로 합니다. spec은 컴포넌트의 역할을 기술해 놓은 것입니다. spec은 Component의 테스트에 필요합니다. Component를 테스팅하는 방법은 다음 글에서 다루도록 하겠습니다.) 8줄로 이루어진 이 작은 예제 안에는 여러 개념이 공존하고 있습니다. Component는 angular에서 앞으로 가장 많이 접하게 될 중요한 요소이므로 자세히 하나씩 뜯어서 보기로 합니다.

 

Module

Module은 ECMA6에 추가된 자바스크립트의 기본 문법입니다. 자바스크립트에서 Module의 단위는 파일입니다. 즉 하나의 파일 안에 작성된 로직들이 하나의 모듈로서 구성된다는 의미입니다. (참고: ExploringJs-16. Modules)

자바스크립트에서 Module 개념은 이전까지는 라이브러리를 통해서 사용할 수 있었습니다. 이제 ECMA6에서 Module이 정식 기능으로 포함되면서 다음과 같은 문법을 사용할 수 있게 되었습니다.

이 예제는 @angular/core에서 “Component”라는 Module을 불러와서 사용하겠다는 선언입니다. 앞으로 우리가 작성할 Component에서@angular/core 라이브러리와 같이 angular가 제공하는 내장 라이브러리들에서 여러 Module 많이 사용하게 될텐데요. 그 때마다 위와 같이 import 구문을 하나씩 추가하게 될 겁니다.

사용하려고 하는 Module을 import한다면 반대로 export도 존재하겠지요? 파일 안에서 선언된 함수나 클래스가 외부 다른 파일에서 재사용이 필요할 때 export 구문으로 다른 모듈에 노출할 수 있습니다. AppComponent 예제에서 우리는 이미 export라는 키워드를 보았습니다.

AppComponent에 export키워드를 추가하였기 때문에 AppComponent는 다른 Module(파일)에서 import하여 사용 가능합니다. 지난 Quickstart 예제 main.ts 파일을 이제 다시 살펴 보면 angular 앱을 최초 구동하는 데에 AppComponent를 import하여 사용하는 것을 확인할 수 있습니다.

참고: @angular/core는 사실 여러 모듈을 하나로 묶어 주는 통합 모듈 입니다. 소스를 확인하면 실제 여러 모듈을 다시 export하는 것을 알 수 있습니다.  angular에서는 이렇게 여러 모듈을 하나로 묶어서 export하는 모듈을 barrel이라고 합니다.

 

Metadata

Metadata는 컴포넌트를 구성하는 정보를 Json 객체로 정의한 것 입니다. angular는 @Component 뒤에 붙는 소괄호() 안에 Metadata를 넘겨 받아서 이 정보를 가지고 실제 컴포넌트를 구성합니다. 따라서 Metadata가 포함된 @Component는 반드시 필요합니다.

예제에는 selector, template 두 개의 key에 각각 ‘my-app’, ‘<h1>My First Angular 2 App</h1>’ 값이 있는 것을 알 수 있는데요.

key에서 의미를 유추할 수 있듯이 selector는 컴포넌트를 마크업으로 표현할 때의 이름입니다. 이는 <my-app></my-app>으로 다른 컴포넌트의 자식 컴포넌트로 포함될 때 사용됩니다.

template은 컴포넌트의 뷰를 정의합니다. 우리가 만들 웹어플리케이션에서는 뷰의 레이아웃은 html을 이용하기에 template안에는 html 마크업 뭉치가 들어갈 자리입니다.

quickstart예제에서는 단 두개의 Metadata 만을 정의하고 있지만 이 외에도 styles, directives, providers 등 다양한 Metadata 가 있습니다만 추후에 필요할 때 하나씩 설명하도록 하겠습니다.

 

Decorator

Decorator는 @~~~ 로 시작하는 키워드를 의미합니다. 우리가 지금까지 본 Decorator는 @Component가 전부이지만 이 외에도 angular에서는 @Injectable, @Input 등의 Decorator가 몇 개 더 있습니다.

Decorator 자체는 말 그대로 코드 내에서 필요에 따라 부가적인 정보나 속성을 표현하기 위한 언어적인 장치입니다. 그러므로 앞으로 @~~ 와 같은 키워드를 만나면, 아 이게 Decorator구나 하고 생각하고 넘어가시면 됩니다.

(참고: Decorator는 ecma6 스펙에는 포함되어 있지 않고 ecma7에 포함될 것으로 기대하고 있는 스펙입니다. 따라서 현재 angular 에서는 Decorator 사용을 위해서 reflect-metadata라는 shim용 패키지를 필요로 합니다.

또한 Typescript에서도 Decorator는 아직 정식 문법이 아니라 tsconfig.json을 보면  아래와 같은 설정이 추가로 되어 있습니다.)

Class

OOP를 경험해 보신 분들에게 익숙한 그  Class가 ECMA6에서도 드디어 공식적으로 언어의 스펙에 포함되었습니다. angular에서 component는 이 Class를 통해서 완성됩니다.

예제에서는 클래스 안에 아무런 내용이 없습니다만, 앞으로 이어지는 예제에서 {} 안에 내용을 하나씩 채워 나가게 됩니다. 주로는 ajax로 가져온 데이터를 가공하여 뷰에 노출한다거나, 사용자의 액션을 처리할 이벤트를 등록하는 로직들을 클래스 안에 메서드 형태로 담게 됩니다.

클래스에 사용할 문법적인 내용은 Typescript의 클래스 매뉴얼을 참조해 됩니다. 물론 기존 OOP계열의 언어를 사용하신 분들은 큰 이질감 없이 적응할 수 있습니다.

 

매듭짓기

오늘은 Angular의 Component를 설명하기 위해서 먼저 일반적인 개념의 컴포넌트를 살펴보았습니다. 오늘 소개한 Component도 간단하게는 하나의 컴포넌트로서 역할을 할 수 있습니다.다만 이후에 소개하게 될 몇가지 개념을 포함해야 제대로 완성된 “컴포넌트”가 되기에 오늘은 일부러 Component와 컴포넌트의 개념을 다시 분리해서 설명했습니다.

Component를 구성하기 위해서 사용된 ECMA 문법으로 Module, Decorator, Class를 살펴 보았고 angular에서 Component를 구성하는데 Metadata가 반드시 필요하다는 것을 설명했습니다. 다음 글에서 부터는 quickstart 예제를 벗어나 좀 더 실제적인 예제를 통해서 Component를 자세히 설명해 보도록 하겠습니다.

Angular2 글 목록보기