blazor에서 제공하는 razor component 파일에는 UI단과 c#코드를 작성하는 코드 스페이스로 구성되어 있습니다.
![[c# blazor] c# 코드 비하인드 파일 생성하는 방법 [c# blazor] c# 코드 비하인드 파일 생성하는 방법](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
하지만 코드가 길어지다 보면 코드 스페이스에 모든 코드를 작성하기 부담스러울때가 있는데요.
이럴때 코드 비하인드 파일을 통해 따로 코드를 관리하는게 편리합니다.
이번 포스팅은 코드 비하인드 파일 생성에 관련된 내용입니다.
예제로 사용할 Test.razor파일을 먼저 생성합니다.
![[c# blazor] c# 코드 비하인드 파일 생성하는 방법 razor파일 생성](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
//Test.razor
![[c# blazor] c# 코드 비하인드 파일 생성하는 방법 [c# blazor] c# 코드 비하인드 파일 생성하는 방법](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
코드 스페이스단에 작성한 프러퍼티값을 UI단에 출력하는 아주 간단한 코드를 작성 해보았습니다.
(바인딩을 모르시는 분은 해당 포스팅 참조)
output:
![[c# blazor] c# 코드 비하인드 파일 생성하는 방법 [c# blazor] c# 코드 비하인드 파일 생성하는 방법](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
우리가 해보고 싶은것은 코드 스페이스 구간에 작성했던 것을 코드 비하인드 파일로 옮겨 똑같이 작동하는지 확인해보고 싶습니다.
그러기에 앞서 코드 비하인드 파일을 만들어어야 겠죠?
새로운 클래스 파일 생성을 합니다.
![[c# blazor] c# 코드 비하인드 파일 생성하는 방법 [c# blazor] c# 코드 비하인드 파일 생성하는 방법](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
이때 중요한점은 이름인데요.
![[c# blazor] c# 코드 비하인드 파일 생성하는 방법 [c# blazor] c# 코드 비하인드 파일 생성하는 방법](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
razor 파일과 같은 이름을 사용하되, 뒤에 .cs를 추가 해줘야 합니다.
추가버튼을 누르면 자동적으로 razor파일 밑에 .cs파일이 생성되는 것을 알 수 있습니다.
![[c# blazor] c# 코드 비하인드 파일 생성하는 방법 [c# blazor] c# 코드 비하인드 파일 생성하는 방법](https://blog.kakaocdn.net/dn/Usimw/btrH3QA3WvK/w02WkiEaebAdMyS0uezfOK/img.png)
//Test.razor.cs
생성한 class파일에 들어가보면 아래와 같은 에러가 발생할것입니다.
![[c# blazor] c# 코드 비하인드 파일 생성하는 방법 [c# blazor] c# 코드 비하인드 파일 생성하는 방법](https://blog.kakaocdn.net/dn/mdBbV/btrH6IwpzXr/2bbpu11zL8kyfEdMFBhVE1/img.png)
이는 같은 이름의 클래스가 이미 정의되어 있어서 발생하는 에러인데요, partial키워드를 추가해주면 해결이 가능합니다.
![[c# blazor] c# 코드 비하인드 파일 생성하는 방법 partial 추가](https://blog.kakaocdn.net/dn/cvx7hd/btrH323aMCP/f5J9Ekjn9zyYjsss81ywlK/img.png)
(partial 키워드를 모르시는분은 해당 포스팅 참조)
추가적으로 ComponentBase를 상속해줍니다.
![[c# blazor] c# 코드 비하인드 파일 생성하는 방법 [c# blazor] c# 코드 비하인드 파일 생성하는 방법](https://blog.kakaocdn.net/dn/bLE1BI/btrKzKTHysN/A5Ly1Okm45h8Wr0epMvG60/img.png)
ComponentBase정의에 접속해 보면, 코드 스페이스에 주로 사용되는 여러 메소드들이 정의 되어있는걸 알 수 있습니다.
고로 ComponentBase를 통해 코드스페이스와 완전히 같은 환경을 만들었다고 볼 수 있습니다.
![[c# blazor] c# 코드 비하인드 파일 생성하는 방법 [c# blazor] c# 코드 비하인드 파일 생성하는 방법](https://blog.kakaocdn.net/dn/bwCsuY/btrKEp73xR7/4qDmy2rV41IK70O22eI44k/img.png)
//test.razor.cs
마지막으로 아래와 같이 코드 스페이스에 작성했던 코드 그대로 코드비하인드에 적어주시기만 하면 완성입니다!
![[c# blazor] c# 코드 비하인드 파일 생성하는 방법 [c# blazor] c# 코드 비하인드 파일 생성하는 방법](https://blog.kakaocdn.net/dn/bOyTjr/btrKyrNGUzf/4UCduz6HN0FcNzo4skKcI1/img.png)
'c# > blazor' 카테고리의 다른 글
[c# blazor] NavigationManager LocationChanged 이벤트란? (0) | 2022.07.27 |
---|---|
[c# blazor] NavigateTo를 이용한 특정 페이지 이동방법 (0) | 2022.07.26 |
[c# blazor] IJSRuntime이란? (자바스크립트 사용) (0) | 2022.07.25 |
[c# blazor] 바인딩이란 ? (양방향, 단방향) (0) | 2022.07.22 |
댓글
꼬예님의
글이 좋았다면 응원을 보내주세요!
이 글이 도움이 됐다면, 응원 댓글을 써보세요. 블로거에게 지급되는 응원금은 새로운 창작의 큰 힘이 됩니다.
응원 댓글은 만 14세 이상 카카오계정 이용자라면 누구나 편하게 작성, 결제할 수 있습니다.
글 본문, 댓글 목록 등을 통해 응원한 팬과 응원 댓글, 응원금을 강조해 보여줍니다.
응원금은 앱에서는 인앱결제, 웹에서는 카카오페이 및 신용카드로 결제할 수 있습니다.