양방향데이터바인딩 vs 단방향데이터바인딩

양방향 데이터바인딩

일단 양방향 데이터바인딩은 ui데이터변경을 감시하는 왓처와 자바스크립트안에서 데이터변경을 감시하는 왓처를 통해 ui와 프로그램안에 데이터를 자동으로 동기화해주는 것이라함.
코드로 예를 들어보자 !
양방향은 vue에서 쓰인다는데 vue를 써보질 않아서 와닿지는않는다.

<input type="text" id="inputField">
<p id="output"></p>

<script>
  // 초기 데이터
  let inputValue = "";

  // 입력 필드에 입력이 있을 때 데이터 업데이트
  document.getElementById("inputField").addEventListener("input", function(event) {
    inputValue = event.target.value;
    updateUI();
  });

  // UI 업데이트 함수
  function updateUI() {
    document.getElementById("output").innerText = inputValue;
  }
</script>

그러니 두번 쓰이게 되고 잦은 업데이트가 있는 프로젝트는 과부화가 걸리겠지

단방향 데이터 바인딩

단방향 데이터 바인딩은 왓처가 한번만 사용되는것이지.
리액트로 예를 들자면 가상DOM에서 미리 업데이트 된 부분들을 다 계산하고
실제 DOM으로 한번만 보내는거지. 그래서 왓처가 한번만 사용되는것.
단방향은 익숙하게 쓰는것이다보니 금방 이해가 됐다.

<input type="text" id="inputField">
<p id="output"></p>

<script>
  // 초기 데이터
  let inputValue = "";

  // 입력 필드에 입력이 있을 때 데이터 업데이트
  document.getElementById("inputField").addEventListener("input", function(event) {
    inputValue = event.target.value;
    updateUI(inputValue);
  });

  // UI 업데이트 함수
  function updateUI(value) {
    document.getElementById("output").innerText = value;
  }
</script>

두코드의 차이점

1. 양방향 데이터 바인딩

• updateUI 함수를 호출할 때 해당 값을 인자로 전달하지 않는다.
• 데이터의 변경은 양방향으로 이루어지며, updateUI 함수 내에서는 직접 전역 변수 inputValue를 참조하여 UI를 업데이트

2. 단방향 데이터 바인딩

• updateUI2 함수를 호출할 때 해당 값을 인자로 전달한다.
• 데이터의 변경은 한 방향으로 진행되며, updateUI 함수 내에서는 명시적으로 데이터를 받아와서 UI를 업데이트

그러니깐,, !
html(view) , script(model) 서로 연결되어있으니~ 양방향~
인자로 내려주기 때문에 단방향~