Vue.js 데이터 바인딩 정의

📌 데이터 바인딩 그게 뭔데?

국비지원 웹 퍼블리셔 과정을 수강했던 나는 개발자 친구가 2명이 있다. 한 놈은 프런트엔드 개발자, 한 놈은 백엔드 개발자. 두 친구 모두 나를 개발자의 세계로 인도해준 좋은 친구들이다. 물론, 혼도 많이 났지만 말이다. 아무튼, 불과 몇 개월 전 친구들과 술 한 잔 기울이며 나눴던 대화에서는 프런트 개발자인 친구도, 백엔드 개발자인 친구도 내게 리액트 (자바스크립트 라이브러리)를 꼭 하라고 했다. 개발 시장에서 가장 많이 쓰이고 있다나 뭐라나?

 

그 당시만 해도 그런 게 있나 보다 하며 넘겼다. 그리고 몇 개월 후 나는 리액트 대신 뷰 Vue라는 프레임워크를 공부하고 있다. 내가 리액트가 아닌 뷰를 선택한 이유는 아래 링크를 통해 확인해보면 좋을 것 같고,

 

✅ 내가 Vue.js를 선택한 이유

내가 React가 아닌 Vue.js를 선택한 이유

 

아무튼, 가장 큰 이유 중 하나인 러닝 커브가 낮다는 것 말고도, 데이터 바인딩 부분에 있어서 양방향 데이터 바인딩이 된다는 큰 장점 때문이다. Vue.js는 Angular와 마찬가지로 양방향 데이터 바인딩을 지원한다.

 

양방향 데이터 바인딩이란?
모델(Model)에서 데이터를 정의한 후 뷰(View)와 연결하면 모델과 뷰 중 어느 한쪽에 변경이 일어났을 때, 다른 한쪽에 자동으로 변경된 데이터가 반영되는 것을 의미한다.

 

내가 공부한 바로는 실제 프로젝트 내에서 서버로부터 받아온 데이터를 바인딩하는 경우는 다음과 같이 4가지로 생각해 볼 수 있다고 한다.

• 데이터가 html tag 안에 텍스트로 바인딩되는 경우
• 데이터가 html tag의 속성(attribute)으로 바인딩되는 경우
• 데이터가 html의 Form element의 value에 바인딩되는 경우
• 다중 데이터가 html의 다중 element를 생성하기 위해 바인딩되는 경우

 

🌳 위 경우 중 첫 번째 경우는 나와 비슷한 초보자들이 가장 쉽에 Vue의 데이터 바인딩을 활용한 예로 들 수 있다. script 부분에 기본적으로 data( ) 안에 객체 리터럴 데이터를 넣을 방을 하나 만들어주고, 그곳의 데이터를 template 태그 안에 {{ data( ) 안의 정보 }} 를 바인딩시켜주는 구조 말이다.

<h1> Hello, {{ title }} </h1> 이와 같이 문자열 데이터 바인딩을 시킨 것처럼.

 

나는 이것을 Vue.js의 단방향 데이터 바인딩이라고 이해했다.

 

🌳 두 번째 경우는 raw(원시) HTML 데이터 바인딩이라고 부르나 보다. HTML 태그를 바인딩할 때는 문자열을 바인딩할 때 사용한 이중 중괄호를 이용하면 안 된다고 한다. 이중 중괄호를 이용해서 바인딩하면 html 태그가 아니라 문자열 즉, 텍스트로 인식하게 된다고 한다.

 

실제 VS Code에서 간단한 코드로 확인해보면 아래와 같이 출력됨을 확인할 수 있다.

 

🌳 세 번째 경우는 Form 입력 데이터 바인딩이라 한다고 한다.

웹 페이지에서 사용자로부터 데이터를 입력받을 수 있는 필드를 Form Element라고 하는데, v-model 디렉티브를 활용하여 양방향 데이터 바인딩을 생성할 수 있다고 한다. 여기서 주의해야 할 점은 v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송한다는 것이다.

 

그렇다면 우리는 v-model을 활용하여 양방향 데이터 바인딩을 할 수 있겠구나 정도로 받아들이면 될 것 같다.

 

🌳 네 번째 경우는 아마 Vue를 사용하면서 가장 많이 활용하지 않을까?라는 생각이 들 정도로 활용도가 높을 것으로 예상된다. value를 제외한 HTML 객체의 속성(attribute)에 데이터를 바인딩하기 위해서는 v-bind: 디렉티브를 굉장히 많이 활용한다. 보통 v-bind: 디렉티브는 v-bind를 생략하고 : 콜론만 사용하여 실제 개발에서 활용하기도 한다. 아마 Prettier를 쓰고 있다면, 자동으로 바뀔 것이다.

---

📌 Vue.js Data Binding

그래서 내가 생각한 데이터 바인딩이란, script 태그 안으로 우리가 물고 들어온 데이터를 얼마나 효과적으로, 다양한 방법으로 template 태그 안에 올바르게 뿌려주는 작업이라고 정리하고 싶다. 그리고 template 태그 안에서 사용자로부터 직접 입력받은 데이터 역시 data( ) 영역 안으로 전달해주는 것까지 한다면, 이는 양방향 데이터 바인딩이라고 정리하면 어떨까?

 

https://www.youtube.com/watch?v=cSH97mtk7MU