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

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

    Angular에서 UI를 만드는 것은 WPF에서 UI를 만드는 방법과 매우 유사합니다. 일반적으로 UserControl 클래스로 표현되는 사용자 컨트롤을 사용합니다. UserControl은 마크업과 코드를 재사용 가능한 컨테이너로 그룹화하여 동일한 인터페이스와 기능을 여러 다른 위치에서 사용할 수 있습니다. 이 사용자 컨트롤에는 UI 마크업용 .xaml 파일과 로직용 C# 파일이 있으며, 이 사용자 컨트롤에 대한 모든 유형의 스타일 정보를 포함하는 리소스 사전도 있을 수 있습니다. Angular 에서는 Component 라는 것을 사용합니다. 컴포넌트에는 모든 UI 마크업에 사용되는 html 파일이 있습니다. 속성과 로직에 사용되는 타입스크립트 파일이 있으며, 모든 스타일 정보에 사용되는 CSS 파일이 있습니다. 계속해서 이 둘이 얼마나 유사한지 살펴보겠습니다.

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

    앱 구성 요소 TypeScript 파일을 열어 시작하세요. 우리는 이 파일을 구성 요소의 코드 숨김으로 생각할 수 있으며, 그렇게 생각하는 이유는 WPF로 이동하여 Sample 사용자 컨트롤의 코드 숨김인 Sample.xaml.cs를 열면 많은 유사점을 볼 수 있습니다.

    먼저 AppComponent 라는 내보내는 클래스가 있음을 확인할 수 있습니다. 이제 이 AppComponent에는 title이라는 속성도 있습니다. 따라서 이 클래스 내에서 구성 요소를 실행하는 데 필요한 모든 속성, 메서드 및 이벤트를 정의하겠습니다. 이는 사용자 컨트롤과 완전히 동일하지는 않지만 매우 유사합니다. 이 경우 Sample 이라는 클래스가 있다는 것을 알 수 있으며, 이 클래스 내에서 사용자 컨트롤이 작동하는 데 필요한 모든 속성, 메서드 및 이벤트를 정의할 것입니다.

    다음으로, 타입스크립트 파일에서 몇 줄 위로 이동하여 작은 @ 기호와 Component가 있는 이 작고 이상한 구문을 살펴보겠습니다. 이것을 실제로 데코레이터라고 합니다. 이 데코레이터는 Angular 내보내는 이 클래스를 어떻게 처리할지 알려줍니다. 이 경우 이를 구성 요소로 처리할 것이고, 구성 요소로 처리하기 때문에 데코레이터에 몇 가지 정보를 제공해야 합니다. 정보를 살펴보기 전에 먼저 타입스크립트 파일의 맨 위 줄인 import { Component } from '@angular/core'에 주의를 기울여 보겠습니다. 이것을 using 문이라고 생각할 수 있습니다. 기본적으로 이 구성 요소가 작동하는 데 필요한 객체를 가져오고 있습니다. 이 경우 @angular/core 모듈에서 Component 가져오므로 실제로 이 구성 요소에 데코레이터를 사용할 수 있습니다. 이는 사용자 컨트롤의 코드 뒤에 있는 using 문과 매우 유사합니다. C# 내부에서 using 문을 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
cmd

    명령이 완료되면 여러 가지 일이 발생한 것을 확인할 수 있습니다. 먼저 구성 요소에 지정한 것과 동일한 이름을 가진 새 폴더가 있습니다. 또한 html 파일, SPEC 파일, typescript 파일 및 CSS 파일 등 4개의 새 파일이 있습니다. app.module.ts 파일도 업데이트했습니다.

    새로 생성된 구성 요소가 포함된 sample 폴더를 살펴보세요. 구성 요소에 필요한 세 가지 파일과 추가 SPEC 파일이 모두 포함되어 있음을 알 수 있습니다. 이것은 실제로 이 기사에 필요하지 않은 테스트 파일이므로 지금은 다루지 않겠습니다. 또한 app.module.ts를 수정하여 NgModule의 declarations 섹션에 샘플 구성 요소를 추가했습니다.

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

    ​sample.component.ts 파일로 돌아가 보겠습니다. 위에서 다룬 app.component.ts 파일과 매우 유사해 보입니다. 이 경우 구성 요소를 가져오는 import 문이 있습니다. 선택기를 app-sample로 정의하는 구성 요소 데코레이터가 있습니다. 템플릿 URL은 sample.component.html 이고 스타일 URL은 sample.component.css 입니다.

    계속해서 sample works!. 애플리케이션을 시작할 때 이를 확인하고 싶으므로 app.comComponent.html로 이동해 보겠습니다. 제목을 제외한 대부분의 초기 마크업을 삭제하고 <app-sample></app-sample>만 추가하겠습니다.

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

    Run the application

    터미널에 npm start 입력하면 애플리케이션이 컴파일 및 빌드되고 브라우저 내에서 실행됩니다. 모든 것이 순조롭게 진행되었다면 애플리케이션이 브라우저에서 실행되어야 합니다. welcome to app. 앱 구성 요소의 마크업이 적용된 다음 sample works!. 이것은 방금 추가한 샘플 구성 요소의 마크업입니다. 이제 텍스트를 '이 샘플은 매우 잘 작동합니다!'로 변경하여 샘플 구성 요소를 약간 변경해 보겠습니다.

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

    브라우저를 저장하고 확인하면 실제로 샘플 구성 요소 렌더링을 담당하는 HTML을 편집하고 있음을 알 수 있습니다. 구성 요소의 스타일을 지정하려면 스타일 URL을 확인해야 합니다. 이제 sample.component.css 파일을 열고 단락 태그 색상을 빨간색으로 만들어 보겠습니다.

    p {
    color: red;
}
css

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

    Additional Resources

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