앵귤러 기초(Angular basic) 7.Structural Directive, ngIf

구조지시문(structural Directive)에 대해 알아보고, 구조지시문인 ngIf를 사용해 보겠습니다

 

이번 포스트에서는 아래의 내용을 다루고 있습니다.

1. Directive종류
2. 구조 지시문(Structural Directive)
3. ngIf란

---

Directive

Directive는 html을 강화하고 확장하는데 사용하는 custom html 요소(element) 혹은 속성(attribute)라고 생각할 수 있습니다.

우리는 directive를 만들어서 사용하거나, angular가 제공 해주는 내장 지시문을 사용할 수 있습니다.

 

두 종류의 Directive

1. custom directive(커스텀 지시문)
2. Built-In directive(내장 지시문)

 

이전 포스트에서는 아래와 같이 component를 만들고 커스텀 directive를 사용하는 법을 이용했었습니다.

app-movies라는 directive를 템플릿에서 사용

먼저 살펴볼 내장된 angular directive는 구조 지시문(structural directive)입니다.

structural directive

구조 지시문은 요소 및 해당 하위 요소를 추가, 제거 또는 조작하여 뷰의 구조 또는 배치를 수정합니다.

구조 지시문에는 지시어 이름 앞에 별표(*)가 있습니다. 그것은 구조적인 지시로 표현함을 의미합니다.

대표적인 것이 ngIf와 ngFor입니다. ngIf와 ngFor를 사용하면 if로직과 for로직을 html에서 가능하게 합니다.

그럼 구조 지시문 첫 번째로 ngIf에 대해서 알아보겠습니다.

 

ngIf

ngIf는 문서 객체 모델(DOM)의 트리의 일부를 제거하거나 다시 만드는 역할을 하는 표현식 기반의 구조 지시어입니다.

따라서 ngIf는 무언가 콘텐츠를 선택적으로 표시해야 할 때 쓸 수 있는 좋은 방법입니다. 

 

예를 들어, 배열에 영화 데이터가 있을 경우에만 테이블을 표시하고 싶다고 하겠습니다.

ngIf사용

테이블 요소에 ngIf를 사용하고 movies.length로 설정합니다.

배열의 length는 배열의 길이를 제공합니다.

movies 배열에 데이터가 존재하면 movies.length는 ture로 판단되어 테이블이 표시됩니다.

movies 배열이 비어 있으면 movies.length는 false로 판단되어 테이블 요소와 열 헤더를 포함한 테이블 요소의 모든 하위 항목이 DOM에서 제거되고 UI에 표시되지 않습니다.

 

그런데 Angular 컴파일러가 ngIf directive를 어떻게 찾을까요?

AppModule에서 BrowserModule을 import하고 있다

appModule.ts파일을 보면 BrowserModule을 import하는 것을 알 수 있습니다.

BrowserModule을 import함으로 ngIf와 ngFor directive가 이용 가능하게 됩니다. 따라서 AppModule에서 선언된 모든 구성 요소는 ngIf 또는 ngFor 지시문을 사용할 수 있습니다.

 

우리는 지금 table 의 표시/비표시를 ngIf를 통해 구현하려고 하고 있습니다. 

그러기 위해서 ngIf 조건의 판단 재료인 movies를 컴포넌트 속성에 선언을 해야 합니다.

movies의 인스턴스 배열을 선언하고 싶지만, 현재 movies가 어떤 형식을 가지고 있는지 정의가 없습니다.

지금은 임의의 배열로 정의하고 차후에 개선해 보도록 하겠습니다.

TypeScript에서는 특정 데이터 타입이 무엇인지 알 수 없거나 상관없을 때 any를 데이터 타입으로 사용합니다.

배열에 영화 데이터를 채워 넣어야 하는데 데이터는 어디서 얻을 수 있을까요?

일반적으로 이러한 데이터를 얻기 위해 백엔드 서버와 통신하지만 지금은 하드코드로 넣도록 하겠습니다.

 

이제 템플릿 쪽을 살펴봅시다.

DOM에서 추가하거나 제거할 요소는 테이블 이므로 테이블의 속성에 *ngIf=를 입력한 다음 따옴표로 묶인 표현식을 입력합니다.

 

이제 다 됐습니다 브라우저에서 확인해 보겠습니다.

테이블이 보이는 상태

 movies 배열에 데이터가 존재하니 테이블이 보이고 있네요.

그럼 데이터를 주석처리 후에 다시 브라우저를 확인해 보겠습니다

데이터를 주석처리해  movies.length 가 0

데이터가 존재하지 않아  ngIf가 false가 됩니다.

브라우저에서 테이블을 그리지 않은걸 확인해 볼 수 있습니다.

ngIf에 의해 테이블이 제거된 상태

이렇듯 ngIf를 사용하면 관련 요소와 하위 요소가 문자 그대로 DOM에서 추가되거나 제거됩니다. 

 

수고하셨습니다. 여기까지  구조지시자인 ngIf에 대해 알아봤습니다.

다음 포스트에서도 이어서 구조지시자를 알아보도록 하겠습니다.