[c# blazor] IJSRuntime이란? (자바스크립트 사용)

 

 

 

이번 포스팅에서는 블레이저에서 IJSRuntime을 통해  자바스크립트를 사용하는 방법에 대해 알아보겠습니다.

 

아래 예시처럼 버튼을 클릭하면 글자가 바뀌는 UI를 구성해볼건데요.

 

 

먼저 예제 코드를 작성할 Razor파일을 생성합니다.

 

 

//JavascriptTest.razor

 

 

간단하게 UI를 구성해주고 버튼을 클릭하면 실행될 ChangeText()함수를 만들어 보았습니다.

 

빨간 사각형 부분이  자바스크립트와 연동시킬 함수를 넣는 부분인데요.

 

그에 앞서  c#코드에 자바스크립트 코드를 어떻게 작성할까요?

 

//_Layout.cshtml

 

 

_Layout.cshtml에 들어가서 <script>문을 생성한 후 함수를 작성하면 됩니다.

 

 

StartJS라는 이름의 함수로 작성을 해보았는데요, id값을 인자로 받고 있는 형태입니다.

 

즉 c#코드에서 id값을 넘겨 받아 getElementById함수를 통해 수정하고자하는 태그 위치를 알아낸 후,

.innerText로 텍스트를 변경 해주는 코드입니다.

 

그렇다면 이렇게 생성한 자바스크립트 코드를 어떻게 c#코드와 연결 시킬까요?

 

그때 사용하는 것이 바로 이번 포스팅의 주제이기도 한 IJSRuntime입니다.

 

//JavascriptTest.razor

 

 

IJSRuntime을 inject시키고 편의상 이름은 JS로 설정하였습니다.

 

그리고 빨간사각형 같이 작성해주시면 되는데요.

 

 

<object>를 반환하는 형태의 함수입니다.

첫번째 인자는 사용할 자바스크립트의 함수명을 적는곳이고, 두번째는 그 자바스크립트 함수의 인자로 무엇을 넣을지 정해주는 것입니다.

 

여기선 변경하고자 하는 태그의 id값을 넘겨주어야 하니 JS를 넘겨주면 끝입니다.

 

+ 보너스

 

 

이번엔 좀더 나아가서 글자를 입력한 값을 출력하는 UI를 만들어보겠습니다.

 

//JavascriptTest.razor

 

 

기존 코드에서 input태그를 추가하였습니다.

이때 ExText라는 빈문자열 필드를 만들고, 이 값을 input태그와 양방향 바인딩을 시켰습니다.

(바인딩을 모르시는 분은 해당 포스팅 참조)

 

즉, input창에 값을 입력하면 그 값이 ExText에 담길 것이고  ExText를 자바스크립트 함수의 인자로 넘겨주는 구조인것입니다.

 

그렇다면 기존 자바스크립트 인자에 넣을 자리를 하나 더 만들어 줘야 겠지요?

 

 

// _Layout.cshtml

 

자바스크립트 함수에도 인자 자리를 하나 늘려줍니다.