Angular 컴포넌트로 사용자 인터페이스 만들기

Angular 애플리케이션에서 사용자 인터페이스를 만들 때 Angular 구성 요소를 사용하면 프로세스를 용이하게 할 수 있습니다.

Angular에서 UI를 만드는 것은 WPF에서 만드는 것과 매우 유사합니다. 우리는 보통 사용자 제어 함수를 사용하며, UserControl 클래스로 표현됩니다. A는UserControl 마크업과 코드를 재사용 가능한 컨테이너로 묶어, 동일한 인터페이스와 기능을 여러 다른 장소에서 사용할 수 있게 합니다. 이 사용자 컨트롤은 UI 마크업을 위한 .xaml 파일과 로직을 위한 C# 파일을 포함하며, 이 사용자 컨트롤에 대한 스타일링 정보를 포함하는 리소스 사전도 포함될 수 있습니다. Angular 에서는 a라고 불Component 리는 것을 사용합니다. 컴포넌트는 HTML 파일을 가지고 있으며, 이는 모든 UI 마크업에 사용됩니다. 속성과 로직을 위해 사용되는 typescript 파일이 있고, 모든 스타일링 정보는 CSS 파일을 사용합니다. 이 두 사람이 얼마나 비슷한지 한번 보자.

왼쪽에는 사용자 컨트롤이 호출Sample 된 WPF 애플리케이션이 있습니다. 또한 스타일링 정보를 담은 리소스 사전SampleResources도 있습니다. 오른쪽에는 Angular 애플리케이션AppComponent이 있습니다. 이제 Angular 앱 구성 요소를 WPF 애플리케이션의 샘플 사용자 제어와 비교해 보겠습니다.

먼저 앱 컴포넌트 Typescript 파일을 열어보세요. 이 파일을 컴포넌트의 코드 뒤에 있다고 생각할 수 있는데, 그렇게 생각하는 이유는 WPF로 가서 사용자 제어 뒤Sample의 Sample.xaml.cs을 열면 많은 유사점을 볼 수 있기 때문입니다.

먼저, 우리가 내보내AppComponent는 클래스가 있다는 것을 알 수 있습니다. 이 AppComponent에는 title이라는 속성도 포함되어 있습니다. 이 클래스 내에서는 컴포넌트가 실행되는 데 필요한 모든 속성, 메서드, 이벤트를 정의할 것입니다. 이것은 사용자 컨트롤과 매우 비슷하거나 거의 동일합니다. 우리는 클래스가 있고, 이 경우 '라고Sample 불리며, 이 클래스 내에서 사용자 컨트롤이 작동하기 위해 필요한 모든 속성, 메서드, 이벤트를 정의할 것입니다.

다음으로, typescript 파일에서 몇 줄을 위로 올라가서 작은@ 기호와 Component가 있는 이 이상한 문법을 살펴보겠습니다. 이것을 '데코레이터'라고 부릅니다. 이 장식가가 우리가 수출하는 이 클래스를 어떻게 다룰지 Angular 말하고 있어요. 이 경우에는 컴포넌트로 취급할 것이고, 컴포넌트로 처리하기 때문에 데코레이터에서 정보를 제공해야 합니다. 정보를 본격적으로 보기 전에, 먼저 typescript 파일의import { Component } from '@angular/core' 맨 위 줄에 주의를 기울여 봅시다. 이것을 사용법이라고 생각할 수 있습니다. 본질적으로, 이 컴포넌트가 작동하기 위해 필요한 객체들을 가져오는 것입니다. 이 경우에는 모듈에서Component 가져오@angular/core는 것이므로, 이 컴포넌트에 데코레이터를 실제로 사용할 수 있습니다. 이것은 사용자 제어 뒤에 있는 코드 내 using 문과 매우 유사합니다. 우리는 C# 내에서 사용자 제어가 작동하기 위해 필요한 객체를 찾고 사용하기 위해 C# 내의 문장을 사용합니다using.

이제 구성 요소 데코레이터 내부로 돌아가 보겠습니다.

4행의 코드 줄은 셀렉터라고 불립니다. 셀렉터는 HTML에서 이 요소들을 어떻게 정의할지 결정하는 데 도움을 줍니다. 이 셀렉터는 호출app-root 되어 있어서, index.html를 열면 본체 내에서 호출된app-root 요소를 볼 수 있습니다. 그 요소는 컴포넌트 데코레이터에서 정의된 셀렉터를 사용해 이 컴포넌트의 인스턴스를 정의합니다.
다음으로 5행에는 템플릿 URL이라고 불리는 것이 있습니다. 이것은 이 컴포넌트의 시각적 렌더링을 나타내는 html 파일을 가app.component.html 리키고 있습니다. 이것은 WPF의 사용자 컨트롤 파일과Sample.xaml 매우 유사한데, 여기서 xaml은 이 컨트롤이 어떻게 렌더링될지 나타내는 마크업입니다.
6행에서는 스타일 URL을 볼 수 있습니다. 스타일 URL은 CSS 파일을 가리키고 있습니다. 이 파일은 컴포넌트의 스타일링 정보를 나타냅니다. 파일을 열app.component.css 면 스타일링 정보가 없지만, CSS 파일을 리소스 사전에 직접 매핑하는 것으로 생각할 수 있습니다. XAML의 리소스 사전은 사용자 컨트롤이나 그 안에 있는 요소들의 모든 스타일링 정보를 포함하여, 우리의 설계에 맞게 렌더링됩니다. 이것은 CSS에서 하는 것과 똑같은 일입니다.

Generate a component

이제 Angular 컴포넌트가 WPF 사용자 컨트롤과 얼마나 비슷한지 알았으니, 새 컴포넌트를 만들어 애플리케이션에 추가해 보겠습니다. 데스크톱 개발자라면 WPF에서 새로운 사용자 제어를 추가하고 싶을 때, 프로젝트에서 오른쪽 클릭을 하고 사용자 제어 > 추가를 선택하면 됩니다. 물론 Visual Studio Code에서 같은 작업을 시도하면 그 옵션은 없습니다. 새 파일, 새 폴더만 있어요. 즉, 터미널에 접속해 Angular CLI를 사용해 컴포넌트를 생성해야 합니다. 그럼 터미널을 입력Control + Backtick 해서 토글해봅시다. 터미널에서는 생성을 위해 NG G를, 컴 포넌트를 C로 입력한 후, 예를 들어 컴포넌트 이름을 입력합니다.sample

ng g c sample

명령이 완료되면 여러 가지 일이 일어났다는 것을 알 수 있을 것입니다. 먼저, 컴포넌트에 부여한 이름과 같은 새 폴더가 있습니다. 또한 html 파일, SPEC 파일, typescript 파일, CSS 파일 등 네 개의 새로운 파일도 추가되었습니다. 파일도app.module.ts 업데이트했습니다.

새로 만든 컴포넌트가 들어있는 폴더를sample 보세요. 컴포넌트에 필요한 세 가지 파일이 모두 있고, 이 추가 SPEC 파일도 포함되어 있습니다. 이 파일은 사실 이 글에 필요하지 않은 테스트 파일이므로, 지금은 신경 쓰지 않겠습니다. 또한 app.module.ts에 수정하여 NgModule 섹션에 샘플 성분을declarations 추가했습니다.

Note

이는 중요합니다. 새 구성 요소가 생성될 때마다 NG 모듈의 선언 섹션에서 선언되어야 합니다. 이 섹션에서는 기본적으로 이 모듈에 속하는 구성 요소를 설명합니다.

우리 파일로sample.component.ts 돌아가자. 위에서 다룬 파일과app.component.ts 매우 비슷해 보입니다. 이 경우에는 컴포넌트를 임포트하는 import 문이 있습니다. 우리는 셀렉터app-sample를 정의하는 컴포넌트 데코레이터가 있습니다. 템플릿 URLsample.component.html과 스타일 URLsample.component.css이 있습니다.

이제 HTML 파일을 열어 보겠습니다. 여기서 다음과 같은 단락sample works!이 있습니다. 신청을 시작할 때 이 부분을 확인하고 싶으니 app.component.html로 넘어가겠습니다. 초기 마크업 대부분을 삭제하고 제목만 추가<app-sample></app-sample> 하겠습니다.

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <app-sample></app-sample>
</div>

Run the application

터미널에 입력npm start 하면 애플리케이션을 컴파일하고 빌드한 뒤 브라우저 내에서 실행됩니다. 모든 것이 잘 진행된다면, 우리 애플리케이션은 브라우저에서 실행될 것입니다. 앱 구성 요소에서 나오는 마크업이 있고welcome to app, 그 다음sample works!에 이것이 방금 추가한 샘플 컴포넌트의 마크업입니다. 이제 샘플 구성 요소를 약간 바꿔서 텍스트를 '이 샘플이 매우 잘 작동합니다!'로 바꾸어 보겠습니다.

<p>
  This sample works very well!
</p>

저장하고 브라우저를 확인하면, 샘플 컴포넌트를 렌더링하는 HTML을 실제로 편집하고 있음을 알 수 있습니다. 컴포넌트 스타일을 만들고 싶다면, 스타일 URL을 봐야 합니다. 그럼 파일을 열고sample.component.css 단락 태그를 빨간색으로 만들어 봅시다.

p {
    color: red;
}

이를 저장하고 브라우저를 열면 CSS 파일의 스타일이 샘플 구성 요소에 적용된 것을 볼 수 있습니다.

Additional Resources

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

Angular 컴포넌트로 사용자 인터페이스 만들기

Generate a component

Note

Run the application

Additional Resources

테마