양방향 바인딩?

기술면접을 준비하며,
React, Angular, Vue.js 각각의 특징과 차이점 등을 정리하던 도중,
"Vue.js는 Angular의 양방향 바인딩, React의 Virtual DOM의 개념을 모두 가진 장점이 있다" 라는 문장을 통해,

양방향 바인딩이란 무엇인가?

라는 의문이 생겼다.

바인딩 binding

양방향이라면 <->
단방향이라면 ->
무언가 양쪽 방향으로 진행한다/ 아니다 같은 느낌은 오는데
그럼 바인딩은 무엇일까?

사전적 정의 **바인딩 Binding**;
1. 체육) 스키판에 신을 고정시키기 위한 죔쇠
2. 컴퓨터)  
   
   1. 한데 모아서 묶어 놓은 덩이
   2. 프로그램에서의 모든 번지를 절대 번지로 바꾸어 주기억 장치의 고정된 부분에 묶어 놓는 일 

프로그래밍에서의 바인딩이란?

- 각종 값들이 확정되어 더 이상 변경할 수 없는 구속(bind)상태가 되는것, 
  프로그램 내에서 변수, 배열, 라벨, 절차 등의 명칭, 
  즉 식별자(identifier)가 그 대상인 메모리 주소, 데이터형 또는 실제값으로 배정되는 것 [네이버지식백과]

- 프로그램의 어떤 기본 단위가 가질 수 있는 구성요소의 구체적인 값, 성격을 확정하는 것

// 예
int num = 123;

num 변수명, int 변수의 자료형, 123 변수의 자료값
이렇게 이름, 자료형, 자료값에 구체적인 값을 할당하는 각각의 과정을 바인딩이라고 한다고.
Ye Ryu 포스팅

바인딩이 일어나는 시간에 따라, 정적/동적 바인딩으로 분류된다

음 바인딩이란 이런 거구나,
그런데 양방향으로 바인딩한다는 건 뭐지? 하고 다시보니
양방향 데이터 바인딩 라는 표현이 보인다
바인딩이랑은 조금 다른건가??

데이터 바인딩?

• 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법
  즉, 브라우저의 메모리에 있는 데이터와 화면에 보이는 데이터를 일치시키는 기법

여기서 드디어 양방향 바인딩, 단방향 바인딩이란 표현이 나옴

그림을 통해 보자면,

단방향 one way: 이벤트를 통해 데이터 변화 감지, 화면 업데이트
양방향 2 way : 데이터 변화를 감지해 템플릿과 결합하여 화면 갱신, 화면의 입력에 따라 데이터 갱신 - 데이터와 화면사이의 데이터가 일치

뭔소린지 모르겠다 - 예시를 보자!

대부분의 javascript 환경에서는 단방향 데이터 바인딩
대표적으로 React는 단방향 데이터 바인딩을 함

이벤트 발생할 경우 함수를 통해 input의 value를 저장하고 재설정해주는 방식

function App () {
    const handleInput = (e) => {
        // 인풋값 저장, 필요하면 변환
        // 화면에 갱신
        let inputValue = e.target.value;
        ...
    }
    
    return <>
      <input onChange={handleInput} />
    </>
 }

Angular의 ng-model

// menu객체의 itemCount 속성을 텍스트 입력박스의 값으로 바인딩해줘!
<input type="text" ng-model="menu.itemCount">

일일이 input 값을 처리하는 함수를 만들지 않아도 된다, 양방향 데이터 바인딩은 AngularJS의 주요기능이라고.

참고: 데이터바인딩의이해, jeremy's Blog

정리하자면, 양방향 바인딩이란?

양방향 바인딩이란, 데이터 변화를 감지해 템플릿과 결합하여 화면을 갱신하고 화면에서의 입력에 따라 데이터를 갱신하는 것, 즉 화면과 데이터가 일치하게 되는 것.

단방향 바인딩이란, 데이터와 템플릿을 결합하여 화면을 생성하는 것

양방향의 장점은: 코드량을 줄여줌, 단점은: 변화에 따라서 DOM 객체 전체를 렌더링해주거나 데이터를 바꿔줘야해서 성능 감소되는 경우

단방향의 장점은: 반대로 성능저하없이 DOM객체 갱신이 가능, 데이터 흐르임 단방향이라 이해가 쉽고, 디버깅이 쉬울 수 있다, 단점은: 변화를 감지해서 업데이트하는 코드를 매번 작성해야 함

느낀점

리액트 경험뿐인 나에게 단방향은 상대적으로 이해가 쉬운반면, 실제 코드 없이 양방향이 대체 뭔뜻인가 싶었다, 앵귤러의 예시를 보니 이런거구나 하고 느낌은 오지만, 실제 코딩으로 사용해보는 것과는 천지차이일듯.. 러닝커브가 상대적으로 완만하다는 Vue.js 부터 실제로 써보면 좀 더 의미가 와닿을 것 같다, 직접 써보자!

Vue.js 폼 입력 바인딩 "v-model"