데이터 바인딩이란?
데이터 바인딩은 화면에 표시되는 데이터와 브라우저 메모리 내의 데이터(여러 개의 JavaScript 객체)를 동기화하는 프로세스이다.
예를 들어, HTML 페이지에서 서버나 스크립트로부터 받은 데이터를 표시한 후, 해당 데이터가 변경되면 HTML 페이지 상의 데이터도 자동으로 갱신하는 과정을 말한다.
양방향 바인딩(Vue, Angular)
양방향 데이터 바인딩은 JavaScript와 HTML 사이에서 ViewModel을 통해 양방향으로 데이터가 연결되어, 한 쪽에서의 변경이 다른 쪽에 자동으로 반영되는 구조를 말한다.
이 구조에서는 데이터 변경이 자동으로 DOM을 업데이트하거나, 페이지 내에서 모델의 변경을 자동으로 감지한다.
장점
- 코드량이 크게 줄어들며, 유지보수 및 관리가 용이해진다. 웹 애플리케이션의 복잡도가 증가함에 따라 이점이 더욱 부각된다.
단점
- 가능한 성능 고려사항: Vue와 Angular는 가상 DOM과 변경 감지 메커니즘을 사용하여 데이터 변화에 따른 DOM 업데이트를 최적화한다. 그러나 매우 대규모의 데이터나 복잡한 상태 트리를 가진 애플리케이션에서는 여전히 성능 최적화를 위해 추가적인 전략이 필요할 수 있다.
- 상태 관리의 복잡성: 상태가 여러 컴포넌트에 걸쳐 양방향으로 바인딩되어 있을 때, 상태의 흐름을 추적하고 디버깅하는 것이 어려워질 수 있으며, 이는 개발 및 유지보수 과정에서 성능 최적화를 더 어렵게 만든다.
<!DOCTYPE html>
<html>
<head>
<title>Vue 양방향 데이터 바인딩 예제</title>
<script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
<input v-model="message" placeholder="여기에 입력하세요">
<p>입력한 메시지: {{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
</body>
</html>
Vue에서 v-model 지시자를 사용해 양방향 데이터 바인딩을 구현한다.
이는 사용자 입력과 애플리케이션 데이터 사이의 자동 동기화를 가능하게 해, 개발자가 데이터 상태 관리와 사용자 인터페이스 간의 일관성을 유지할 수 있도록 한다.
단방향 바인딩(React)
단방향 데이터 바인딩은 JavaScript(Model)에서 HTML(View)로의 단일 방향 데이터 흐름을 의미한다.
이 구조에서 HTML에서 JavaScript로의 직접적인 데이터 갱신은 불가능하다.
대신, 이벤트 핸들러를 통해 데이터 변화를 감지하고 JavaScript에서 HTML로 데이터를 업데이트해야 한다.
단방향 바인딩은 데이터의 흐름이 한 방향으로만 이루어지기 때문에, 코드의 이해가 용이하고 데이터 추적 및 디버깅이 간편하다.
장점
- DOM 객체 갱신 시 데이터 변화에 따른 성능 저하가 없습니다.
- 데이터 흐름이 단방향(부모 -> 하위 컴포넌트)이라, 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉽다.
단점
- 변화를 감지하고 화면을 업데이트하는 코드를 매번 작성해야 한다.
import React, { useState } from 'react';
function App() {
const [message, setMessage] = useState(''); // 상태 초기화
const handleChange = (event) => {
setMessage(event.target.value); // 입력 값으로 상태 업데이트
};
return (
<div>
<input
type="text"
value={message} // 입력 필드의 값으로 상태를 사용
onChange={handleChange} // 입력 값이 변경될 때마다 handleChange 호출
/>
<p>입력한 메시지: {message}</p>
</div>
);
}
export default App;
React는 "제어 컴포넌트(Controlled Components)" 패턴을 사용하여 명시적인 데이터 흐름 관리를 제공한다.
이는 양방향 데이터 바인딩을 직접적으로 제공하지 않지만, 비슷한 결과를 얻을 수 있게 한다.
'IT > React' 카테고리의 다른 글
| SPA를 선택한 이유, 기존 MPA와의 차이점 (0) | 2024.03.02 |
|---|---|
| Prettier 설치, 설정 .eslintrc 작성하기, VScode 자동 포매팅 설정 (0) | 2024.02.18 |
| CRA에서 Vite로 전환, Vite 시작, Vite 설치하기 (2) | 2024.02.08 |
| React에서 여러 상태 한 번에 관리하는 hook(훅) 만들기 (0) | 2024.01.25 |
| React의 useCallback 예제 (0) | 2023.11.29 |