데이터 바인딩

---

데이터 바인딩이란 화면상에서 보여지는 데이터와 브라우저 메모리에 있는 데이터를 동기화 하는 것이다.
즉 HTML(View)에서 서버나 스크립트(Model) 데이터를 화면상에 그려주고 있는 상황에서 해당 데이터가 변경되었을 때 그에 맞춰 변경하는것이라고 생각하면된다.

단방향 데이터 바인딩?

단방향 데이터 바인딩이란 한쪽 방향으로만 제어가 가능한 것을 의미합니다.
주로 사용하고 있는 React가 단방향 바인딩을 사용하고 있는데 단 데이터와 템플릿을 결합해 화면을 생성한다. (JS -> HTML만 가능)
사용자의 입력에 따라 데이터가 갱신되기 때문에 데이터의 변화 동작이 있을때 업데이트하는 코드를 매번 작성해야하는 단점이 있다. 반면에 디버깅이 쉽고 성능적으로 양방향 보다 우수하다는 장점이 있다.

양방향 데이터 바인딩?

단방향과 반대되는 바인딩 형태이다.
HTML -> JS, JS -> HTML 모두 가능한 형태로 Angular와 Vue가 이에 해당한다. 코드 사용면에서 이점이 있고 다만 watcher가 많아지게 될 경우 성능저하가 일어날 수 있다.

결론

React, Vue를 모두 사용해봤는데 확실히 Vue를 사용할 때가 더 코드가 간결했던 경험이 있었는데 이 떄문이였던 것 같다. 그리고 watch를 빈번하게 사용하면 성능이 저하된다고 인강에서 봤었는데 양방향 데이터 바인딩이 많아지기 떄문이라는걸 이제 깨달았다.

일차원적으로 생각하면 Vue는 양방향, 단방향 모두 사용 가능하다고 판단이 되어서 이 부분만 놓고 보면 Vue가 더 좋은거 아닌가라는 생각이 든다..🤣

하지만 일관된 아키텍처를 선호하고 프로젝트가 커지면 당연히 그래야 된다고 생각하기 때문에 React가 나에겐 더 reasonable한 선택이다.