리액트를 학습 하면서 리액트는 단방향 데이터 흐름이라는 것을 알게되었고, 양방향과 단방향의 차이가 무엇인지 알아보기 위해서 정리를 하게 되었습니다. 개선 사항이 있다면 피드백 주시면 감사드리겠습니다 :)
🌐 데이터 바인딩이란?
✔️ 두 데이터 혹은 정보의 소스를 일치시키는 기법으로, 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(자바스크립트 객체들)를 일치시키는 것을 말합니다.
- 예를 들어, MVC 모델에서 Model과 View를 묶어서 "자동 동기화 시키기" 라고 이해할 수 있습니다.
📌 양방향 데이터 바인딩
✔️ 양방향 데이터 바인딩은 사용자 UI의 데이터 변경을 감시하는 Watcher와 자바스크립트 데이터의 변경을 감시하는 Watcher가 UI와 자바스크립트 데이터를 자동으로 동기화 시켜주는 방식을 말합니다.
- HTML -> JS
- JS -> HTML
- 양방향 데이터 바인딩을 사용하는 대표적인 프레임워크는 Vue와 Angular가 있다. (단방향은 같게 하기위한 추가적인 코드가 필요)
👉 장점
- 코드 사용면에서 코드량을 크게 줄여준다.
👉 단점
- 하나에 데이터 동기화의 두 개의 Watcher가 사용되고, 데이터가 많아지게 되면 이 데이터의 동기화를 위한 수 많은 Watcher가 생성되므로, 성능 저하가 발생할 수 있다.
📌 단방향 데이터 바인딩
✔️ 단방향 데이터 바인딩은 단 하나의 Watcher가 자바스크립트의 데이터 갱신을 감지하여 사용자의 UI 데이터를 갱신한다.
✔️ 사용자가 UI를 통해 자바스크립트의 데이터를 갱신할 때는, 이벤트를 통해 갱신하게 된다.
- JS -> HTML
- 단방향 데이터 바인딩을 사용하는 대표적인 라이브러리에는 React가 있다.
👉 장점
- 하나의 Watcher를 사용하기 때문에 양방향 데이터 바인딩이 가지는 성능적인 이슈를 해결할 수 있다.
- 데이터가 한 방향으로 흐르기 때문에 코드 이해와 데이터 추적과 디버깅이 쉽다.
👉 단점
- 변화를 감지하고 화면을 업데이트하는 코드를 매 번 작성해야 한다.
- 예를 들어, 리액트에서 Input을 변경할 때 onChange 이벤트를 감지하여 상태를 변경시킨다. 그리고, Watcher가 이 상태를 감지하여 UI를 업데이트를 하게 된다. 이 방식이 바로 단방향 데이터 바인딩이라고 볼 수 있다.
