javascript ํจ์๋ฅผ ํธ์ถํ์ง ์๊ณ C# ์ฝ๋์์ DOM์ ์ง์ ์กฐ์ํ ์ ์์ต๋๊น?
๊ทธ๋ ๊ฒ ๊ธฐ๋ณธ์ ์๊ฐํ๋ค
var elem = document.getElementById("123");
elem.AddOrUpdateStyle("background-color", "red");
elem.AddOrUpdateStyle("height", "150px");
elem.Remove("height");
var boxes = document.getElementsByClassName("box");
foreach (var box in boxes)
{
if (box.Classes.Contains("hidden"))
{
box.AddOrUpdateStyle("display", "none");
continue;
}
box.Value = "";
box.SetAttribute("placeholder", "Type here...");
}
๋ฌ์ฑ ๊ฐ๋ฅํ๊ฐ์?
DOM ์กฐ์ si๋ ํ์ฌ ์น ์ด์ ๋ธ๋ฆฌ(https://github.com/WebAssembly/proposals/issues/16, https://github.com/WebAssembly/design/blob/master/Web.md)์์ ์ง์๋์ง ์์ผ๋ฏ๋ก ์ด๊ฒผ์ต๋๋ค. mono wasm์ ๊ณง ์ง์ํ์ง ์์ต๋๋ค. Blazor์ ํ์ฌ ์ํ: ์ฌ์ฉ์ ์ง์ ๊ตฌ์ฑ ์์ ๋ฐ JS ์ํธ ์ด์ฉ์ฑ์ ์ฌ์ฉํด์ผ๋ง ๊ทธ๋ ๊ฒ ํ ์ ์์ต๋๋ค.
์ด ๋ฌธ์ ๋ ๋ค์ ํ์ด์ผ ํ๋ค๊ณ ์๊ฐํฉ๋๋ค. Razor ๊ตฌ์ฑ ์์๋ ํ๋ ์๋์์ JS interop์ผ๋ก ์ํ๋ ๊ฒฝ์ฐ์๋ ์ด ๊ธฐ๋ฅ์ด ์์ด์ผ ํฉ๋๋ค. ElementRef๋ ๋๋ถ๋ถ์ ๊ธฐ๋ณธ์ ์ธ JS ๊ธฐ๋ฅ์ ์ง์ํ๋๋ก ํ์ฅ๋์ด์ผ ํฉ๋๋ค.
์ง์ DOM ์ก์ธ์ค๋ ๋ด๊ฐ Blazor๋ฅผ ์ฌ์ฉํ๋ ์ด์ ๊ฐ ๋ ๊ฒ์
๋๋ค.
์ด๊ฒ์ Blazor์ ๋ํ๊ตฌ๋ฅผ ์ํด ํ์ ์
๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ด ๋ฌธ์ ๋ ๋ค์ ํ์ด์ผ ํ๋ค๊ณ ์๊ฐํฉ๋๋ค. Razor ๊ตฌ์ฑ ์์๋ ํ๋ ์๋์์ JS interop์ผ๋ก ์ํ๋ ๊ฒฝ์ฐ์๋ ์ด ๊ธฐ๋ฅ์ด ์์ด์ผ ํฉ๋๋ค. ElementRef๋ ๋๋ถ๋ถ์ ๊ธฐ๋ณธ์ ์ธ JS ๊ธฐ๋ฅ์ ์ง์ํ๋๋ก ํ์ฅ๋์ด์ผ ํฉ๋๋ค.