[c# blazor] 바인딩이란 ? (양방향, 단방향)

 

 

이번 포스팅에서는 블레이저에서 양방향(two-way) 바인딩 과 단방향(one-way) 바인딩이 무엇인지 알아보도록 하겠습니다.

 

 

예제를 작성할 razor파일을 생성합니다.

 

 

//Example.razor

 

 

routing 주소를 설정해줍니다.

 

1) one-way(단방향) 바인딩

 

@code 단에 들어있는 프러퍼티 값을 UI단에 출력 해보겠습니다. 

 

 

원하는곳에 @를 붙혀주면 위 그림과 같은 방향으로 값이 전달 됩니다.

 

output:

 

 

하지만 input창에 우리가 직접 값을 입력한다고 해서,

 

 

ExValue값이 변경되지는 않습니다.

왜냐하면 code단에서 UI단으로만 전달되는 단방향(one-way) 바인딩이 적용되어있기 때문입니다.

 

그렇다면 UI단에서도 코드단으로 데이터를 넘겨주려면 어떻게 할까요?

그때 사용하는 것이 양방향(two-way)바인딩 입니다.

 

2) two-way(양방향) 바인딩

기존코드를 아래와 같이 변경해주면 끝입니다.

 

 

정말 UI단에서 넣은 값이 코드단에 영향을 끼치는지 확인하기 위해 ExValue를 출력하는 부분을 추가해보았습니다.

 

 

output:

 

 

출력이 잘 되는것처럼 보입니다. 

하지만 잘 보시면 즉각적으로 바뀌지 않고, 마우스를 클릭해줘야지만 바뀌는 현상이 있습니다.

 

이는 디폴트로 포커스가 input을 벗어날때 바인딩을 적용되도록 설정이 되어있기 때문입니다.

 

우리가 명시적으로 적어주진 않았지만, 내부적으로 아래와 같은 코드가 적용 되어 있는 것입니다.

 

 

해당 부분을 "onintput"으로 변경하여, 즉각적으로 반응하도록 수정해보겠습니다.

 

 

output:

 

 

+ 추가

참고로 @bind-value를 @bind로 축약해서도 자주 사용하니 참고하기 바랍니다.