Help
Angular 주요개념
#
Find similar titles
- (rev. 3)
- anonymous
Structured data
- Category
- Programming
Angular의 주요개념 #
컴포넌트 #
일반적으로 Component란 재사용 가능한 단위를 말한다. Front-end Framework인 Angular는 View를 만드는 것이 주된 목적이므로, 최종적으로 완성되는 전체 View를 쪼개서 부분적으로 재사용할 수 있는 단위가 필요한데, 이 역할을 하는 것이 Component이다. 하나의 전체적인 View는 세부적으로 Component로 쪼개지고, 이 쪼개진 Component들의 관계가 Tree 형태를 만들게 되는데, 이러한 상태를 Component Tree라고 한다. 이 Tree의 최상단 Component를 Root Component라고 한다.
템플릿 #
Component는 View를 렌더링하는 주체가 되기 때문에, 어떻게 View를 렌더링해야 하는지에 대한 정보를 가지고 있어야 한다. 이 정보를 Template이라고 한다. Template은 렌더링에 필요한 HTML 요소와 Angular 문법요소 그리고 클라이언트에 의해 발생하는 이벤트 처리 코드를 가지고 있다.
데코레이터 및 메타데이터 #
Angular의 경우 TypeScript를 주 언어로 사용하기 때문에 코드 기반이 클래스이다. 그래서 Component 정의도 클래스로 하게 되는데, Angular는 프레임워크이기 때문에 특정 클래스가 일반 클래스인지 아니면 프레임워크의 어느 부분을 담당하는 클래스인지 표시할 필요가 있다. 이 역할을 하는 것이 Decorator이다. 클래스에 특정 Decorator를 선언하므로서 Angular가 해당 클래스의 역할을 지정하게 된다. 또한 이 Decorator에 데이터를 추가하여 세부적으로 설정할 수 있는데 이 데이터를 Metadata라고 한다. 이러한 Decorator 역할은 Spring Framework의 Annotation과 역할이 비슷하다.
모듈 #
Module은 Angular 어플리케이션을 구성하는 단위로서 관련된 요소들을 하나로 묶어 놓은 것이다. Angular의 경우, Module 단위로 어플리케이션 코드를 인식하므로 모든 Angular 어플리케이션은 반드시 하나 이상의 Module을 가지게 된다. Module 또한 Tree 형태로 구성되고, 최상단에 위치한 Module을 Root Module이라고 한다.
데이터 바인딩 #
Data Binding은 View와 Component에서 발생한 데이터의 변경 사항을 자동으로 일치시키는 Angular의 기능이다. 바인딩 방법에 따라 Two-Way Data Binding과 One-Way Data Binding로 분류된다. Two-Way Data Binding이란 양방향 바인딩이라고 부르며, Component와 View 중 어느 쪽이 변하든 두 상태 정보를 자동으로 일치시켜 주는 기능이다. One-Way Data Binding이란 단방향 바인딩이라고 부르며, Component에서 View 쪽으로 혹은 View에서 Component 쪽으로 한 방향으로 상태 정보를 일치시켜 주는 기능이다. 단방향 바인딩은 세가지 방식으로 나뉜다.
- Interpolation : Component에서 선언한 속성을 View에서 사용하는 경우이다.
- Property binding : View의 DOM이 소유한 HTML Element 속성을 바인딩하는 경우이다.
- Event bidning : View의 DOM에 대한 Event handler로 Component의 메서드를 사용하는 경우이다.
위와 같이, 양방향과 단방향으로 크게 두 가지 바인딩으로 분류하지만, 사실 양방향 바인딩은 내부적으로 두 개의 단방향 바인딩으로 구성된다. 기존의 AngularJS는 다른 방식으로 양방향 바인딩을 제공했지만, 성능 상의 이슈로 인하여 Angular에서는 단방향 바인딩 두 개를 이용해서 기존의 양방향 바인딩을 구현하였다.
서비스 #
Angular에서 Service란 Component에서 View를 처리하는 로직 이외의 로직은, 따로 분리한다는 개념이다. 일반적인 MVC 패턴에서 볼 수 있는 Service의 개념과 비슷하다. Component는 View를 표현하고 처리하는 것이 목적이므로, Component 안에 다른 관심사가 존재하면 Component의 독립성이 보장되지 못하고, 중복코드가 발생하게 되어 코드 재사용과 유지보수가 힘들어진다. 이런 문제를 해결하기 위해, Component 내의 관심 로직 이외의 로직은 Service로 분리하여 따로 작성하고, Component 내에 Service 작성시 강한 의존관계(Dependency Relationship)가 형성되는 것을 막기 위하여, Dependency Injection (DI) 패턴을 사용한다. DI 패턴에는 일반적으로 Constructor를 이용하는 방법과 setter를 이용하는 방법이 있는데, Angular의 경우, Constructor Injection을 지원한다. 쉽게 말하면, Component가 직접 Service를 new keyword를 이용하여 생성하는 것이 아니라, Angular Framework이 Component가 사용할 수 있도록 Service 객체를 생성해서 Component에게 넣어주는 방식이다. 이 방식을 Inversion of Control (IoC) 라고 하고, Angular Framework은 IoC Container이다.
디렉티브 #
Directive는 DOM의 모양이나 동작을 지시하기 위한 명령이라고 할 수 있다. 보통 HTML Element 형태로 표현하거나, Element의 속성 형태로 표현한다. 예를 들면, AngularJS에서의 ngIf와 같은 역할이다. DOM을 제어하는 방법으로서, Directive 외에 Component도 있지만, 이 둘을 분리한 이유는, Component는 원칙적으로 자신이 렌더링하는 View에 대해서만 관심이 있다. 그러므로, 여러 View들이 공통적으로 사용하는 Element나 Element의 속성 같은 것들은 따로 Directive로 표현하는 것이, 객체지향 설계의 단일책임원칙(SRP)에 위배되지 않고, Component의 복잡도를 낮출 수 있으며, 유지보수와 같은 관리적인 측면에서도 더 나은 형태로 구현할 수 있다. Directive는 크게 다음과 같이 4가지 종류로 분류된다.
- Component Directive : Component의 selector에서 직접 지정해 사용하는 Directive이다.
- Attribute Directive : HTML Element의 속성으로 표현된다. built-in 형태로는 ngClass 등이 있다.
- Structural Directive : DOM의 구성을 제어하기 위한 Directive로서, built-in 형태로는 ngIf, ngFor, ngSwitch 등이 있다.
- Custom Directive : built-in 형태로 만들어진 것이 아닌 직접 만들어서 사용하는 Directive이다.
파이프 #
Pipe는 Template 내에서 출력하고자 하는 데이터를 원하는 형식으로 변환하여 출력하는 기능이다. 원본 데이터에는 변형을 가하지 않은 상태로 출력 형태만 변경해 주기 때문에 원치 않은 Side Effect를 없앨 수 있다.
