💡 데이터 바인딩이란?
구조화된 웹 애플리케이션을 구축하기 위해선 뷰, 모델의 분리가 필수적이다. 하지만 뷰와 모델은 유기적으로 동작해야한다. 데이터 바인딩은 이런 모순을 해결해준다.
데이터 바인딩은 화면상에 보여지는 데이터(view)와 브라우저 메모리에 있는 데이터(model)을 하나로 연결하는 것을 의미한다.
변화 감지
라이브러리를 사용할 때 모델이 변경된다는 것은 컴포넌트의 프로퍼티 값이 변경되는 것을 의미하며, 라이브러리는 어떤 경우 모델이 변화하는지에 주목한다.
사실 모델이 변경되는 가능성이 있는 경우는 그렇게 많지 않다. 아래와 같은 비동기 처리가 수행될 때 컴포넌트 데이터(즉, 모델)가 변경될 수 있다.
- DOM 이벤트(click, key press, mouse move 등)
- Timer 함수(setTimeout, setInterval)의 tick 이벤트
- Ajax 통신 / Promise예를 들어, html에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주고 있다고 가정했을때, 해당 값이 변경될 경우 다시 html상에 데이터를 변경된 값에 따라서 동기화해주는 것을 '데이터 바인딩'이라고 한다.
아래는 React 함수형 컴포넌트에서 initial로 초기화한 값을 최초 html상에 출력(view)하고, 이후 '재 데이터 바인딩'버튼을 누르면, handleClick함수를 호출하고, 변경된 데이터(model)를 html에 다시 바인딩 하는 예시이다.
import { useState } from 'react';
function App() {
// 1. initial로 초기화한 값을 html상에 출력
const [initial, setInitial] = useState({
info: '이건 초기화 값이다!'
});
// 3. 변경된 상태값(model)을 html에 다시 바인딩한다.
function handleClick() {
setInitial({
info: '이건 변경된 값이다!'
});
}
return (
<div>
<button
type="button"
onClick={handleClick}
>
재 데이터 바인딩 // 2. 버튼클릭, onClick이벤트 핸들러로 handleClick호출
</button>
</div>
);
}단방향 데이터 바인딩
SPA프레임워크 중엔 대표적으로 React가 단방향 데이터 바인딩을 한다.
컴포넌트 내에서는 [js(model) => html(view)]로 한 방향으로만 데이터를 동기화하는 것을 말한다. 그래서 역으로 html(view)에서 js(model)로 직접적인 데이터 갱신은 불가능하다. 그렇기 때문에 앞전에 본 예시같이 이벤트 함수를 주고, 함수를 호출한 뒤 js에서 html로 데이터를 변경해야한다.
컴포넌트 간에서는 [부모 컴포넌트 => 자식 컴포넌트]로만 데이터가 전달되는 구조이다.
양방향 데이터 바인딩
SPA프레임워크 중엔 대표적으로 Angular, Vue가 양방향 데이터 바인딩을 한다고 알려져있다. 하지만 Angular는 양방향, 단방향 바인딩을 모두 지원하도록 추후 개선되었다.
컴포넌트 내에서는 js(model)과 html(view)사이에 viewModel의 존재로 서로 바인딩되어 둘 중 하나만 변경돼도 함께 변경되는 것을 의미한다. [html(view) <=> viewModel <=> js(model)] 
컴포넌트 간에서는 [부모 컴포넌트 => 자식 컴포넌트]로는 props를 통해 데이터를 전달하고, [자식 컴포넌트 => 부모 컴포넌트]로는 emit event를 통해 데이터를 전달하는 구조이다.
☑️ 참고
