Written by angular-style
on 2021-07-02

데이터 바인딩

최근 Vue.js 공부를 시작하면서, Vue.js 프레임워크는 단방향 바인딩과 양방향 바인딩을 제공한다는 것을 알게 되었다.

그와 달리, 이전에 공부했던 React.js는 단방향 바인딩을 한다.

그래서 이 차이점과 데이터 바인딩에 대해 한 번 정리해보려 한다.

1. 데이터 바인딩?

이미지 출처: https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/#vuejs%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

ViewModel에서 DOM Listeners과 Data Bindings이 Vue.js가 가지고 있는 큰 특징 2가지이다.

사용자가 버튼을 클릭한다거나 할 때 이벤트를 감지할 수 있는 DOM Listeners

DOM Listeners로 이벤트를 감지해서 JavaScript에 있는 데이터를 바꾸거나, JavaScript에서 작성한 특정한 로직이 실행되게 된다. JavaScript의 데이터가 변경됐을 때 Data Bindings를 이용해서 화면에 반영한다.

그래서 쉽게 말해 데이터 바인딩이란, 데이터와 화면을 연결하는 것이다.

데이터가 변경되면 그에 따라 화면도 업데이트된다. 데이터와 화면을 일치시킴.

그 업데이트하는 방식은 단방향/양방향 2가지로 구분된다.

둘을 구분짓는 점은 'HTML에서 변경된 내용이 데이터에 영향을 미치는가'이다.

내가 익숙하게 공부한 React는 JS ==> HTML 방향으로만 데이터 바인딩이 가능하다.

JS에서 HTML에 바인딩한 데이터를 수정할 경우에는 화면에 반영되지만, (JS==>HTML 단방향)

화면에서 직접 엘리먼트 값을 변경했을 때 JS 데이터가 수정되지는 않는다.

그래서 화면에서의 데이터 수정을 JS 상의 데이터로 가져와서 한다. JS에서 임의의 이벤트를 통해 변화를 감지하고 그에 따라 화면을 업데이트시키는 작업이 필요하다.

2. 단방향 데이터 바인딩

이벤트를 통해 변화를 감지하여 데이터에 값이 담기면 그에 따라 화면이 업데이트한다. 그래서 이렇게 변화 감지 + 화면 업데이트 코드를 매번 작성해야 한다는 단점이 있다.

그러나 데이터의 흐름이 단방향이기 때문에 데이터 방향을 예측하기 쉽고, 따라서 디버깅이 쉽다는 장점이 있다.

또한, JS 코드가 데이터에 집중되어 일관된 데이터 관리 로직을 갖는다는 점도 장점이다.

2.1 React.js

리액트는 기본적으로 단방향 데이터 흐름을 사용한다.

리액트는 JavaScript ==> HTML 방향으로만 데이터 바인딩이 가능하며, JSX를 통해 DOM을 생성한다.

초간단 기본 예시

input 값을 state로 선언하고, 변화를 감지하는 이벤트 함수를 통해 state를 업데이트하여 화면에 나타낸다.

import { useState } from 'react'; function App() { const [inputValue, setInputValue] = useState(''); const onChange = (e) => { setInputValue(e.target.value); }; return ( <> {inputValue} ); } export default App;

2.1.1 리액트 컴포넌트 간 바인딩

2.2 Vue.js

뷰의 경우 컴포넌트 간 통신은 단방향 바인딩을 사용하기 때문에 props 속성과 event 발생 방식을 이용해서 컴포넌트 간 데이터 공유가 가능하다. 데이터는 항상 아래로 내려가고, 이벤트는 아래에서 위로 올라가는...

이미지 출처: https://joshua1988.github.io/vue-camp/vue/components-communication.html