데이터 바인딩은 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 말한다. 일반적으로 React에서는 단방향, Vue에서는 양방향 데이터 바인딩을 따른다.
단방향 데이터 바인딩
단방향 데이터 바인딩은 데이터가 단일 방향으로 흐르는 방식을 말한다. JavaScript 데이터(Model)가 HTML(View)로만 전달되며, 반대로 HTML에서 JavaScript로 직접적인 데이터 갱신은 불가능하다. 이는 컴포넌트 계층 구조에서도 부모에서 자식으로만 데이터가 전달되는 구조로 이루어진다.
React는 단방향 데이터 바인딩 방식을 따르는 대표적인 프레임워크이다. React의 state와 props를 사용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달한다. state는 컴포넌트 내부에서 관리되는 데이터이며, 이를 변경하면 React는 자동으로 렌더링을 한다. 반면 props는 부모에서 자식으로 전달되는 읽기 전용 데이터로, 데이터 흐름이 항상 부모에서 자식으로만 이루어진다.
장점
- 코드의 이해가 쉽고, 데이터 흐름이 명확하다.
- 데이터의 변경이 발생했을 때 DOM 객체 전체를 렌더링하지 않아 효율적인 성능이 나올 수 있다.
- 디버깅과 데이터 추적이 쉽다.
단점
- 사용자의 입력이나 UI의 변경에 따라 데이터를 갱신해야 할 경우, 이벤트 핸들러를 통해 데이터를 직접 업데이트해야 하므로 추가 코드를 작성해야 한다.
function App() {
const [message, setMessage] = useState('Hello, World!');
return (
<div>
<h1>{message}</h1>
<button onClick={() => setMessage('Hello, React!')}>
Change Message
</button>
</div>
);
}위 코드에서 message는 React의 state로 관리되며, setMessage를 호출하여 상태를 변경하면 React는 자동으로 UI를 갱신한다. 이것이 단방향 데이터 흐름의 작동 방식이다.
양방향 데이터 바인딩
양방향 데이터 바인딩은 JavaScript(Model)와 HTML(View) 사이에 데이터가 양방향으로 동기화되는 방식이다. 즉, 데이터가 변경되면 UI가 갱신되고, UI의 입력 변경 또한 데이터에 반영된다. Vue.js는 v-model 디렉티브를 통해 이러한 양방향 데이터 바인딩을 제공한다.
장점
- 핸들러 코드와 같은 부가적인 케이스를 줄일 수 있기에 코드 양이 줄어든다.
- 복잡한 사용자 입력 처리를 단순화할 수 있다.
- 유지보수와 확장이 용이하다.
단점
- 데이터 변경을 프레임워크가 감지하고 DOM에 반영하는 과정에서 성능 저하가 발생할 수 있다.
- 데이터 흐름이 복잡해질 경우, 디버깅이 어려울 수 있다.
<template>
<div>
<label for="message">Message:</label>
<input v-model="message" id="message" />
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
};
}
};
</script>Vue.js에서 v-model을 사용한 양방향 데이터 바인딩의 기본적인 작동 방식이다. message라는 데이터 속성은 Vue의 반응형 시스템에 의해 관리되며, 사용자가 입력 필드에 값을 변경하면 즉시 데이터가 업데이트되고, 반대로 데이터가 변경되면 화면의 텍스트도 자동으로 갱신된다.
Vue.js에는 단방향 바인딩이 아예 없는 것은 아니다. v-bind라는 단방향 바인딩 디렉티브가 존재한다. 하지만 위와 같이 간단하게 양방향으로 사용하는 것이 보편적이다.
Reference
Unidirectional Data Flow in React
What is the difference between one-way data flow and two-way data binding in vue.js?
데이터 바인딩 - 양방향 데이터와 단방향 데이터의 차이와 장단점
