Blazor와 Entity Framework Core 사용해서 데이터 바인딩하기

안녕하세요 오늘은 Blazor 를 소개하고 Blazor에서 쉽게 데이터를 바인딩할 수 있는 Entity Framework Core 까지 알려드리려고 합니다. Blazor는 C#을 사용하여 웹 애플리케이션을 개발하는 프레임워크로, 클라이언트 측 코드를 C#으로 작성할 수 있는기술입니다. Entity Framework Core는 데이터베이스와의 상호 작용을 간편하게 만드는 .NET의 객체 관계 매핑(ORM) 프레임워크입니다. 이 두 기술을 결합하면 강력한 웹 애플리케이션을 개발할 수 있습니다. 자세하게 더 알아봅시다.

Blazor란 무엇일까요 ?

Blazor 기본 개념

• Blazor WebAssembly: 클라이언트 측 웹 애플리케이션을 브라우저에서 실행할 수 있게 해주는 Blazor 버전.
• Blazor Server: 서버 측에서 실행되며, 브라우저와의 실시간 통신을 통해 UI를 업데이트하는 Blazor 버전.

Entity Framework Core 란 무엇일까요 ?

Entity Framework Core의 장점

• 객체 관계 매핑(ORM): 데이터베이스와의 상호 작용을 객체지향적으로 처리 합니다.
• LINQ 쿼리: C# 언어의 풍부한 기능을 활용하여 데이터에 쉽게 쿼리 작성.
• 데이터베이스 독립성: 다양한 데이터베이스를 지원하며, 코드 변경 없이 데이터베이스를 교체할 수 있습니다.

Blazor와 Entity Framework Core의 통합

프로젝트 설정

Blazor 프로젝트에 Entity Framework Core를 통합하려면 NuGet 패키지를 설치하고 DbContext 클래스를 생성해야 합니다.

NuGet 패키지 설치

dotnet add package Microsoft.EntityFrameworkCore
dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer

DbContext 클래스 작성

우선 DbContext 클래스를 상속받은 ApplicationDbContext 클래스를 작성합니다.

public class ApplicationDbContext : DbContext
{
    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options) { }

    public DbSet<TodoItem> TodoItems { get; set; }
}

모델 클래스 작성

모델 클래스

다음과 같이 모델 클래스를 작성할 수 있습니다. Property 형식으로 작성해주세요.

public class TodoItem
{
    public int Id { get; set; }
    public string Title { get; set; }
    public bool IsDone { get; set; }
}

서비스 등록

startup.cs 파일에 서비스들을 등록할 수 있습니다. services.AddDbContext 메서드를 사용하신 후 ConnectionString 이름을 넣어주세요.

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<ApplicationDbContext>(options =>
        options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

    // 다른 서비스들 등록
}

데이터베이스 마이그레이션

이제 데이터베이스 마이그레이션 작업을 해야 합니다. 비쥬얼 스튜디오 터미널에서 해당 명령어를 통해 간편하게 진행할 수 있습니다. 

dotnet ef migrations add InitialCreate
dotnet ef database update

Blazor에서 데이터베이스 사용

Razor 페이지에서 DbContext 주입하는 과정입니다. @ 키워드를 사용해서 원하는 모델에 대한 데이터를 주입하여 활용할 수 있습니다. 

@page "/"
@inject ApplicationDbContext DbContext

<h3>Todo List</h3>

@foreach (var item in DbContext.TodoItems)
{
    <p>@item.Title</p>
}

 

위와 같이 Blazor와 Entity Framework Core를 결합하면 C#으로 웹 애플리케이션을 개발하면서 데이터베이스와의 간편한 상호 작용을 경험할 수 있습니다. 여러분들도 Blazor 로 나만의 웹앱을 만들어보시고 쉽게 데이터 바인딩까지 진행해보았으면 좋겠습니다. 오늘도 찾아와주신 분들께 감사의 인사를 드리며 마치겠습니다. 

 

다른글보기