Razor Components: 개발자를 위한 작동 원리

Razor 컴포넌트란 무엇인가

Razor 컴포넌트는 ASP.NET Core의 UI 프레임워크로, 개발자가 C#과 HTML을 결합하여 웹 페이지를 구축할 수 있게 해주며, 클라이언트 사이드에서 실행될 수 있는 서버 사이드 로직을 작성할 수 있습니다. Razor 컴포넌트는 Blazor 프레임워크의 일부로, C# 코드를 WebAssembly(Wasm) 또는 SignalR을 사용하여 브라우저에서 실행시키는 클라이언트 사이드 웹 UI 프레임워크입니다. Razor 컴포넌트는 현대 웹 애플리케이션을 구축하기 위한 컴포넌트 기반 아키텍처를 제공하며, UI는 작은, 독립된 컴포넌트로 분리되어 전체 웹 페이지를 구성할 수 있습니다.

Razor 컴포넌트는 Razor 구문이라고 불리는 마크업 언어를 사용하며, 이는 C#과 HTML의 조합으로 서버 측과 클라이언트 측 코드를 통합할 수 있게 합니다. Razor 컴포넌트는 React, Angular, Vue와 같은 다른 컴포넌트 기반 UI 프레임워크와 비슷하지만, C#으로 작성되어 호스팅 모델에 따라 서버 또는 클라이언트 측에서 실행된다는 점에서 차이가 있습니다(WebAssembly 또는 SignalR).

Razor 컴포넌트의 장점

Razor 컴포넌트는 웹 개발자에게 여러 가지 이점을 제공합니다:

Razor 컴포넌트 시작하기

Razor 컴포넌트를 시작하려면 시스템에 .NET Core 3.0 이상이 설치되어 있어야 합니다. Visual Studio 또는 .NET Core CLI의 Blazor 템플릿을 사용하여 새로운 ASP.NET Core 프로젝트를 생성하십시오.

dotnet new blazorserver

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

이 예제에서는 클릭할 때 currentCount 변수를 증가시키는 버튼이 있는 'Counter'라는 Razor 컴포넌트를 가지고 있습니다. @code 블록은 컴포넌트의 C# 코드를 정의하는 데 사용됩니다.

사용자 정의 Razor 컴포넌트 생성하기

프로젝트에서 Razor Components를 저장할 'Components'라는 새 폴더를 만드세요.

'Components' 폴더 안에 '.razor' 확장자를 가진 새로운 Razor Component 파일을 추가하세요. 이 파일은 컴포넌트를 위한 C# 및 HTML 코드를 포함할 것입니다.

Razor Component 파일을 열고 Razor 문법을 사용하여 컴포넌트를 정의하세요. Razor 문법을 통해 C#과 HTML 코드를 단일 파일에서 결합할 수 있어 동적 웹 페이지를 쉽게 만들 수 있습니다. 예를 들어, 다음과 같이 간단한 Razor Component를 정의할 수 있습니다:

<h1>Hello, World!</h1>
<p>This is a Razor Component.</p>

@code {
    // C# code for the component can be added here
}

이제 HTML 마크업에서 컴포넌트의 태그 이름을 사용하여 웹 애플리케이션의 다른 부분에서 Razor Component를 사용할 수 있습니다. 예를 들어, 메인 Razor 페이지에서 컴포넌트를 다음과 같이 사용할 수 있습니다:

<MyComponent />

컴포넌트 매개변수를 사용하여 Razor Component에 데이터를 전달할 수도 있습니다. 컴포넌트 매개변수를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있어 컴포넌트 간의 소통이 가능합니다. 예를 들어, 컴포넌트에서 매개변수를 다음과 같이 정의할 수 있습니다:

@code {
    [Parameter]
    public string Message { get; set; }
}

그리고 다음과 같이 Razor Component 클래스에서 컴포넌트 매개변수를 사용할 수 있습니다:

<p>@Message</p>

그리고 다음과 같이 부모 컴포넌트에서 컴포넌트로 데이터를 전달할 수 있습니다:

<MyComponent Message="Hello from parent component!" />

Razor Components는 서버-사이드 로직을 포함할 수 있어 클라이언트 측에서 실행할 수 있습니다. 예를 들어, 처리 로직을 작성하거나, HTTP 요청을 하거나, 사용자 이벤트를 처리하고, C# 코드를 사용하여 직접 서버-사이드 작업을 수행할 수 있습니다. 이를 통해 JavaScript 코드를 작성하지 않고 동적이고 상호작용적인 웹 페이지를 만들 수 있습니다.

재사용 가능한 Razor Components 만들기

Razor Components의 이점 중 하나는 여러 페이지나 애플리케이션에서 사용할 수 있는 재사용 가능한 UI 컴포넌트를 만들 수 있다는 것입니다. 재사용 가능한 컴포넌트를 만들기 위해 프로젝트의 'Shared' 폴더에 새로운 '.razor' 파일을 만들 수 있습니다.

예를 들어, 책 목록을 표시하는 컴포넌트를 만들고 싶다고 가정해봅시다. "공유" 폴더에 새 BookList.razor 파일을 다음과 같이 생성할 수 있습니다:

다음과 같이 Razor Component를 정의할 수 있습니다:

@typeparam TItem

@foreach (var book in Books)
{
    <p>@book.Title by @book.Author</p>
}

@code {
    [Parameter]
    public List<TItem> Books { get; set; }
}

이 예제에서는 Razor 매개변수로 'Book' 객체 목록을 취하는 BookList라는 컴포넌트가 있습니다. @foreach 루프는 목록을 반복하고 각 책의 제목과 저자를 표시하는 데 사용됩니다.

다음 섹션에서는 IronPDF를 사용하여 Razor Components와 함께 웹 애플리케이션에서 PDF 파일을 생성하는 방법을 탐구할 것입니다.

IronPDF를 사용하는 방법

IronPDF는 개발자가 HTML, CSS, JavaScript에서 PDF 파일을 만들 수 있게 해주는 C# 라이브러리입니다. Google Chrome에 동력을 제공하는 오픈 소스 브라우저 Chromium을 기반으로 구축되었습니다. IronPDF를 사용하면 개발자가 쉽게 Razor Components를 HTML로 변환하여 PDF 파일을 생성할 수 있습니다.

IronPDF는 HTML을 PDF로 변환하는 데 뛰어나며 레이아웃과 스타일을 유지합니다. 보고서, 청구서 및 문서화와 같은 웹 기반 콘텐츠에서 PDF를 생성할 때 특히 유용합니다. HTML 파일, URL 및 HTML 문자열은 쉽게 PDF 파일로 변환될 수 있습니다.

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

Imports IronPdf

Friend Class Program
	Shared Sub Main(ByVal args() As String)
		Dim renderer = New ChromePdfRenderer()

		' 1. Convert HTML String to PDF
		Dim htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>"
		Dim pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent)
		pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf")

		' 2. Convert HTML File to PDF
		Dim htmlFilePath = "path_to_your_html_file.html" ' Specify the path to your HTML file
		Dim pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath)
		pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf")

		' 3. Convert URL to PDF
		Dim url = "http://ironpdf.com" ' Specify the URL
		Dim pdfFromUrl = renderer.RenderUrlAsPdf(url)
		pdfFromUrl.SaveAs("URLToPDF.pdf")
	End Sub
End Class

IronPDF 설치

Razor Components에서 IronPDF를 사용하려면 먼저 IronPDF NuGet 패키지를 설치해야 합니다. 이를 수행하려면 다음 단계를 따르세요:

1. Visual Studio에서 프로젝트를 엽니다.
2. 프로젝트를 우클릭하고 'NuGet 패키지 관리'를 선택합니다.
3. 'IronPDF'를 검색한 다음 'IronPDF 패키지'를 선택합니다.
4. '설치'를 클릭하여 패키지를 설치합니다.

IronPDF NuGet 패키지를 설치한 후, Razor Components 애플리케이션에서 사용할 수 있습니다.

패키지가 설치되면 IronPdf.ChromePdfRenderer 클래스를 사용하여 Razor 컴포넌트에서 새 PDF 파일을 만들 수 있습니다.

ASP.NET Core Razor 컴포넌트에서 PDF 파일을 만들기 위해 HTML 구문 문자열, HTML 파일 또는 URL을 IronPdf.ChromePdfRenderer 메서드에 전달할 수 있습니다. 예를 들어, 카운터 증가와 함께 PDF 파일을 생성하고 싶다고 가정해봅시다.

var renderer = new IronPdf.ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" + currentCount + "</h1>");
pdf.SaveAs("myPdf" + currentCount + ".pdf");

var renderer = new IronPdf.ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" + currentCount + "</h1>");
pdf.SaveAs("myPdf" + currentCount + ".pdf");

Dim renderer = New IronPdf.ChromePdfRenderer()
Dim pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" & currentCount & "</h1>")
pdf.SaveAs("myPdf" & currentCount & ".pdf")

이 예제에서는 ChromePdfRenderer의 새 인스턴스를 생성합니다. 그런 다음 PdfDocument 클래스의 새 인스턴스를 만들고 문자열을 RenderHtmlAsPdf 메서드에 전달합니다. 마지막으로, PdfDocument.SaveAs 메서드를 사용하여 만들어진 PDF 파일을 디스크에 저장합니다.

이 예제에서는 카운터 컴포넌트를 수정했습니다. 우리는 클릭할 때 Counter의 카운트를 포함하는 PDF를 생성할 onClick 카운터 버튼의 함수를 수정했습니다.

결론

이 기사에서는 IronPDF와 함께 Razor Components를 사용하여 웹 애플리케이션에서 PDF 파일을 생성하는 방법을 탐구했습니다. Razor Components의 기본 사항, IronPDF 설치 및 사용 방법을 다루었으며 시작하는 데 도움이 되는 코드 예제를 제공하였습니다.

Razor Components와 IronPDF는 강력한 도구로서 강력하고 기능이 풍부한 웹 애플리케이션을 만들 수 있습니다. 이 기술들을 결합하면 개발자는 기능적이면서도 시각적으로 매력적인 웹 애플리케이션을 만들 수 있습니다.

IronPDF는 또한 razor 페이지와 URL을 PDF로 변환하거나 PDF 문서를 읽고 생성 및 조작하는 데 사용할 수 있습니다. IronPDF는 심지어 기존 또는 새로 생성된 PDF 문서에 헤더, 푸터, 페이지 번호, 디지털 서명, 비밀번호 및 고급 PDF 조작 기능을 추가하는 등의 더 세밀한 PDF 제어를 허용합니다. 개발에서는 무료로 사용 가능하나, 프로덕션에서는 무료 체험판 라이센스나 상업용 라이센스가 필요합니다.