피드로 돌아가기
Dev.toFrontend
원문 읽기
외부 JS 파일 없이 Browser Object() 함수를 통한 Blazor DOM 직접 제어
Opening Pandora's Box: How to Unlock Direct DOM Method Calls in Blazor, No External JS File Needed
AI 요약
Context
Blazor의 ElementReference는 FocusAsync 외의 세부 DOM 메서드 호출을 제한함. 기존 방식은 별도의 외부 JS 파일을 생성하고 IJSRuntime으로 모듈을 로드해야 하므로 개발 흐름 단절과 파일 동기화 비용이 발생하는 구조적 한계가 존재함.
Technical Solution
- Browser 내장 Object() 함수의 Boxing 특성을 활용해 ElementReference를 IJSObjectReference로 변환
- JS Interop 과정에서 ElementReference를 Object() 함수에 전달하여 해당 DOM 요소의 JS 객체 참조를 획득
- 획득한 IJSObjectReference를 통해 scrollIntoView, click 등 DOM API 메서드를 .razor 파일 내에서 직접 호출
- 외부 .js 파일 생성 및 Import 단계를 제거하여 JS-C# 간의 컨텍스트 스위칭 비용 최소화
- Blazor의 추상화 계층을 우회하여 Browser DOM API에 직접 접근하는 Low-level 제어 경로 확보
실천 포인트
- IJSObjectReference 사용 후 반드시 Dispose를 호출하여 Memory Leak 방지 - DOM 요소가 Re-render로 인해 Detach된 경우 참조 무효화 가능성을 검토 - 빈번한 호출이 발생하는 루프나 성능 민감 로직 내 사용 지양 - 팀 내 사용 가이드라인을 수립하여 Blazor 추상화 모델 파괴 최소화