데이터 바인딩이란?

<aside> 🚴🏽 제공자와 소비자로부터 데이터 소스를 함께 묶어 동기화하는 일반적인 기법. UI에 정보를 결합시키는 것.

</aside>

데이터 양방향 바인딩이란?

<aside> 🐸 Data Model과 View 간의 양방향 동기화를 지원하는 것

</aside>

단방향 바인딩 수도코드 (react + mobx)

class view extends React.ReactNode {

  get vm() {
    return vm;
  }

  handleChange = (e) => {
    this.vm.text = e.target.value;
  }

  handleClick = () => {
    this.vm.onClick();
  }

  render() {
     <input value={vm.text} onChange={this.handleChange}/>
     <button onClick={this.handleClick}>저장</button>
  }
}

class vm {
   @observable text = "";

   constructor(model) {
      this.text = model.text;
   }

   onclick() {
      this.model.text = this.text;
   }
}

class model {
   text;

   constructor() {
      this.text = api.callback.text;
   }
}

<aside> 🐸 단방향 바인딩

1. 최초에 text를 화면에 그리기 위해 model에서 API를 통해 text를 가져온다.
2. view에 text를 주입 하기 위해 viewModel에서 model로부터 text를 받는다.
3. view에서 text를 변경하면 viewModel에서 text가 변경 된다. 이때, model의 text 값은 변경되지 않는다. 이 model의 text값을 변경하기 위해 click()이라는 이벤트를 사용하게 되며, 이 버튼을 누르기 전까지 view와 model 간 데이터는 동기화 되지 않는다.

단방향 바인딩을 사용할 경우 이러한 특징을 이용해 사용자가 어떤 동작을 수행하기 전 까지 로컬에서만 데이터를 들고 있게 할 수가 있다. (물론 코드 형식에 따라 양방향도 가능함)

다만, 단방향 바인딩은 위에서 click()을 통해 동기화 시킨 것 처럼 별도의 조작을 필요로 한다.

</aside>

양방향 바인딩 수도코드 (react + mobx)

class view extends React.ReactNode {

  get vm() {
    return vm;
  }

  handleChange = (e) => {
    this.vm.text = e.target.value;
  }

  render() {
     <input value={this.vm.text} onChange={this.handleChange}/>
  }
}

class vm {

   constructor(model) {
      this.text = model.text;
   }

   @computed
   get text() {
      return this.model?.text ?? "";
   }

   set text(text) {
      this.model.text = text;
   }
}

class model {
   text;

   constructor() {
      this.text = api.callback.text;
   }
}

<aside> 🐸 양방향 바인딩 단방향 바인딩과는 다르게, text의 변화 그 자체가 model에서도 변경이 된다. 최초로 받은 text가 사용자의 행동에 따라 끝까지 변경이 되도록 설계되어 있다.

이 경우 viewModel은 단순히 view와 model을 연결해 주는 역할을 하게 되며, 사실상 vm이 없어져도 된다.

양방향 바인딩은 text의 변화가 model의 변화에도 영향을 주기 때문에 실시간으로 동기화가 되지만, 로컬단에서의 변경만을 조작하기 위해서는 별도 변수가 필요하게 된다. (물론, 코드 조작으로 다르게 표현 가능)

</aside>

양방향 바인딩 가장 쉽게 나타낸 코드

class view extends React.ReactNode {
  
  @observable text = "";

  onChange = (e) => {
    this.text = e.target.value;
  }

  render() {
    <input value={this.text} onChange={this.onChange}/>
  }
}