Angular 구조 지침

WPF에서 시각적 트리 요소의 모양을 제어하는 데 있어 가장 일반적인 방법은 바인딩 및 가시성 변환기를 사용하는 것이며, 여기에는 추가 논리와 정적 리소스가 필요합니다. Angular 에도 유사한 기술이 있는데, 이는 DOM 요소의 모양이나 동작을 변경하는 Angular 지시문입니다. Angular directives 유형 중 하나는 structural directives 입니다. 이는 DOM 요소를 추가하거나 제거하여 DOM 레이아웃을 변경합니다.

이 주제에서는 ngIf, ngSwitch 및 ngFor 라는 세 가지 구조적 지시문을 보여 드리겠습니다. 이름에서 알 수 있듯이 이들 각각은 C# 구조와 비교할 수 있습니다. ngIf는 "if-else" C# 코드 블록과 동일하고, ngSwitch는 C# switch-case 문과 동일하며, 마지막으로 ngFor는 C# "for-loop"와 완전히 동일합니다.

`ngIf` Directive

ngIf부터 시작하여 각 지시문을 살펴보겠습니다. 이 지시어를 사용하면 부울 조건에 따라 요소를 표시하거나 숨길 수 있습니다. 이름이 포함된 "h2" 태그가 있는 "div" 요소를 생성하는 것부터 시작하겠습니다.

<div>
  <h2>John</h2>
</div>

이것을 저장하면 브라우저는 John이라는 이름을 렌더링합니다. 그러나 이 "h2" 태그의 가시성 조건을 기반으로 하려는 부울 표현식 유형이 있다고 가정해 보겠습니다. 예를 들어 "isFirstName"이라는 속성을 추가하고 이를 false로 설정하겠습니다. isFirstName이 true일 때 div가 렌더링되도록 하려면 다음 구문 *ngIf = "isFirstName"을 사용해야 합니다.

public isFirstName = false;

<div *ngIf="isFirstName">
  <h2>John</h2>
</div>

파일을 저장하고 isFirstName이 false이므로 이름이 더 이상 브라우저에 렌더링되지 않는 것을 볼 수 있습니다. 그러나 isFirstName을 true로 업데이트하면 "John" 이름이 브라우저에 렌더링됩니다. isFirstName을 다시 false로 설정하면 이름이 더 이상 브라우저에 렌더링되지 않고 비어 있음을 알 수 있습니다. 이것이 ngif 문의 기본 동작입니다. 표현식이 true이면 제공된 템플릿을 렌더링하고 그렇지 않으면 비어 있습니다.

WPF로 동일한 동작을 달성하려면 가시성 변환기를 사용해야 합니다. 코드는 다음과 유사합니다.

public bool IsFirstName { get; set; }
public Sample()
  {
      InitializeComponent();
      this.DataContext = this;
      this.IsFirstName = true;
  }

<UserControl.Resources>
  <BooleanToVisibilityConverter x:Key="VisibleIfTrueConverter" />
</UserControl.Resources>
<Grid>
  <Label Visibility="{Binding Path=IsFirstName, Converter={StaticResource VisibleIfTrueConverter}}">John</Label>
</Grid>

Angular 에서는 훨씬 쉽고 간단합니다.

isFirstName 속성이 false인 경우 대신 성을 제공해야 한다는 요구 사항을 만들어 보겠습니다. 이를 위해 ngIf 지시문의 "else" 절을 활용하겠습니다. 성을 포함하는 "h2" 태그를 정의하는 ng-template 만드는 것부터 시작해 보겠습니다. ng-template DOM의 일부가 아니지만 ngIf 지시문을 사용하는 등의 코드를 통해 추가할 수 있는 콘텐츠를 정의할 수 있는 단순한 자리 표시자입니다. 그러나 이것을 지시문에서 사용하려면 "lastname"과 같은 템플릿 참조 변수 이름을 지정해야 합니다. 이제 ng-template 이름을 지정했으므로 ngIf 지시문으로 이동하여 "; else lastname "을 추가하고 저장해 보겠습니다. "isFirstName"이 false이기 때문에 lastname을 사용한다는 뜻입니다. 즉, 성이 있는 템플릿을 사용한다는 의미입니다.

<div *ngIf="isFirstName; else lastname">
  <h2>John</h2>
</div>
<ng-template #lastname>
  <h2>Doe</h2>
</ng-template>

이제 이것을 작성할 수 있는 또 다른 방법은 "isFirstName, 그 다음에는 firstname, else lastname "이라고 말할 수 있습니다. 따라서 그렇게 하려면 "firstname"이라는 또 다른 템플릿을 만들어야 합니다.

<div *ngIf="isFirstName; then firstname; else lastname">
</div>
<ng-template #firstname>
  <h2>John</h2>
</ng-template>
<ng-template #lastname>
  <h2>Doe</h2>
</ng-template>

"isFirstName"을 true로 변경하면 이름이 브라우저에 렌더링됩니다. ngIf 지시문 사용에 대한 마지막 팁은 표현식이 단일 속성으로 제한되지 않는다는 것입니다. 표현식 전체가 부울 결과를 반환하는 한 실제로 여러 속성 및/또는 함수를 사용할 수 있습니다. 예를 들어" && isValid || getIsValidName()"과 같은 논리 연산자를 사용할 수도 있습니다.

`ngSwitch` Directive

우리가 논의할 다음 지시어는 ngSwitch 지시어입니다. 이를 통해 하나의 표현식을 여러 표현식과 비교하여 추가하거나 제거할 템플릿을 결정할 수 있습니다. Chevy, Ford, GMC 등 자동차 브랜드를 나타내는 "h2" 요소가 있다고 가정해 보겠습니다. 우리는 "Chevy"라는 기본값을 사용하여 TypeScript 파일에 정의한 "make" 속성 값을 기반으로 이러한 항목 중 하나만 표시하려고 합니다. 이를 달성하려면 다음 구문과 함께 ngSwitch 지시문을 사용해야 합니다 [ngSwitch] = expression 여기서 표현식은 "make" 속성입니다. "h2" 태그를 감싸는 "div" 요소에 이것을 추가하는 것만으로는 충분하지 않습니다. WPF와 마찬가지로 각 "h2" 요소에 "case" 문을 추가해야 합니다. 이에 대한 구문은 *ngSwitchCase = expression 입니다. 이 경우 텍스트와 직접 비교하므로 값 주위에 작은따옴표를 추가합니다. 이는 최종 결과가 *ngSwitchCase = "'Chevy'" /다른 두 값과 유사함을 의미합니다/.

make = "Chevy";

<div [ngSwitch]="make">
  <h2 *ngSwitchCase="'Chevy'">Chevy</h2>
  <h2 *ngSwitchCase="'Ford'">Ford</h2>
  <h2 *ngSwitchCase="'GMC'">GMC</h2>
</div>

저장하면 "make" 속성 값이 "Chevy"로 설정되어 브라우저에서 렌더링된 Chevy 옵션만 표시됩니다. "GMC"로 변경하고 저장하면 브라우저에서 GMC 옵션만 렌더링됩니다. 이제 "Lambo"와 같이 사용할 수 없는 옵션을 추가하면 어떻게 될까요? 조건과 일치하지 않기 때문에 아무것도 렌더링되지 않습니다. 일반적으로 C# 내부에서 switch 문을 사용할 때는 대소문자뿐만 아니라 기본값도 있습니다. Angular 에서도 동일한 기능을 사용할 수 있습니다. "Not Found" 텍스트가 있는 다른 옵션을 추가하고 다른 값을 찾을 수 없는 경우 기본값으로 작동하는 *ngSwitchDefault로 표시할 수 있습니다.

<h2 *ngSwitchDefault>Not Found</h2>

이 경우 Lambo를 찾고 있다면 Lambo 옵션이 없으므로 "찾을 수 없음"인 기본 케이스로 전환하고 브라우저에 "찾을 수 없음"이 렌더링됩니다. 우리가 지적해야 할 한 가지 점은 이것이 표현식이기 때문에 우리가 전달하는 표현식과 일치하는 결과를 반환하는 한 함수라도 사용할 수 있다는 것입니다. 매우 간단합니다!

`ngFor` Directive

다음은 ngFor 지시문입니다. 이 지시문을 사용하면 개체 컬렉션을 반복하고 해당 컬렉션의 각 항목에 대한 템플릿을 추가할 수 있습니다. TypeScript 파일에 개체 컬렉션을 추가하는 것부터 시작해 보겠습니다. 우리는 이것을 일련의 브랜드라고 부르고 Chevy, Ford, GMC 및 Dodge를 추가할 것입니다. 다음으로 우리는 "div"를 생성하고 각 "div"에 대해 해당 제조사의 이름을 나열하는 "h2" 태그를 생성할 것입니다. 이를 위해 우리는 *ngFor="let make of makes" 구문인 ngFor 지시어를 사용할 것입니다. 이는 표현식의 "let make" 부분을 통해 정의된 "make" 속성을 사용하고 이를 "h2" 태그에 인쇄하기 위해 보간법을 사용할 수 있는 기능을 제공합니다.

makes = ["Chevy", "Ford", "GMC", "Dodge"];

<div *ngFor="let make of makes">
  <h2>{{ make }}</h2>
</div>

모든 것이 순조롭게 진행되었다면 해당 배열의 각 항목에 대해 h2 태그를 사용하여 브라우저에서 이를 표현하고 있음을 확인해야 합니다. 또한 ngFor 지시문은 다음과 같이 해당 컬렉션에 대한 추가 정보를 얻을 수 있는 몇 가지 도우미 항목을 제공합니다.

"index as i" - 각 항목의 인덱스가 무엇인지 결정할 수 있습니다.

<div *ngFor="let make of makes; index as i">
  <h2>{{ i }} - {{ make }}</h2>
</div>

"first as f" - 항목이 컬렉션의 첫 번째 항목인지 여부를 얻을 수 있습니다.

<div *ngFor="let make of makes; first as f">
  <h2>{{ f }} - {{ make }}</h2>
</div>

"last as l" - 컬렉션의 마지막 행이나 마지막 항목을 가져올 수도 있습니다.

<div *ngFor="let make of makes; last as l">
  <h2>{{ l }} - {{ make }}</h2>
</div>

"odd as o" 또는 "even as e" - 컬렉션의 항목이 홀수 위치에 있는지 짝수 위치에 있는지 판단할 수 있습니다.

<div *ngFor="let make of makes; odd as o">
  <h2>{{ o }} - {{ make }}</h2>
</div>

이것이 각도 애플리케이션에서 뷰에 요소를 추가하고 제거하는 것이 얼마나 쉬운지입니다. 구조적 지시문을 사용하면 작업이 완료됩니다.

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

Angular 구조 지침

ngIf Directive

ngSwitch Directive

ngFor Directive

Additional Resources

테마

`ngIf` Directive

`ngSwitch` Directive

`ngFor` Directive