데이터 바인딩 이해하기 feat: (React, Vue.js)

목차

 

데이터 바인딩이란?

화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미합니다.

데이터 바인딩은 단방향 바인딩과 양방향 바인딩으로 나누어지게 됩니다.

 

 

단방향 데이터 바인딩

컴포넌트 내에서 '단방향 데이터 바인딩'은 Javascript(Model)에서 HTML(View)로 한 방향으로만 데이터를 동기화하는 것을 의미합니다. 

 

[JS(Model) -> HTML(View)]

이에 대한 대표적인 라이브러리는 리액트가 있습니다.

import React, { useState } from 'react';

const DataBinding = () => {

    /**
     * 브라우져 메모리상에 존재하는 데이터 
     */
    const [initData, setInitData] = useState({
        greet: "안녕하세요",
        info: "데이터 바인딩해볼까."
    });
    
    /**
     * 버튼을 클릭하면 상태로 지정한 메모리로 데이터 바인딩 .
     */
    const reDataBinding = () => {
        setInitData({
            greet: "다시 한번 더",
            info: "데이터를 바인딩"
        })
    };
    return (
        <div>
            <button onClick={reDataBinding}>재 데이터 바인딩</button>
        </div>
    );
}

export default DataBinding;

 

 

양방향 데이터 바인딩

컴포넌트 내에서 '양방향 데이터 바인딩'은 Javascript(Model)와 HTML(View) 사이에 ViewModel이 존재하여 하나로 묶여서(Binding) 되어서 둘 중 하나만 변경되어도 함께 변경되는 것을 의미합니다. 

 

[HTML(View) <-> ViewModel <-> Javascript(Model)]

이에 대한 대표적인 프레임워크는 Vue.js가 있습니다.

 

다음과 같이 v-model을 이용해 html에서 자바스크립트로 바로 전달한다.

<input v-model="textValue" />

 

 

장단점 비교

단방향 데이터 바인딩

 

장점
성능 최적화: React는 Virtual DOM을 사용하여 컴포넌트의 변경 사항을 비교하고 최소한의 DOM 조작만 수행하여 성능을 최적화한다. 따라서 데이터 변화에 따른 성능 저하 없이 DOM 객체 갱신 가능하다.

예측 가능성 및 코드 파악에 용이: 데이터의 흐름이 한 방향(부모→하위 컴포넌트)으로 이루어지므로 어떤 컴포넌트에서 데이터가 변경되었는지 쉽게 파악이 가능하다. 따라서 코드를 이해하기 쉽고 데이터 추적과 디버깅을 쉽게 만든다.

단점
코드 양의 증가: 사용자 입력에 따라 데이터의 변화를 감지하고 화면에 업데이트하는 코드를 매번 작성해야하므로 양방향 바인딩 방식보다 상대적으로 코드양이 많아진다.

 

단방향 데이터 바인딩

 

장점
간단한 구현: 코드의 사용면에서 코드의 양을 크게 줄여주기에 간편하다. (데이터를 감지하여 자동으로 동기화되므로)

단점
성능 문제: 데이터 변화에 따라 DOM 객체 전체를 다시 렌더링하는 작업은 성능 감소를 초래할 수 있다. 특히 대규모 애플리케이션에서는 이러한 업데이트가 비용이 많이 들 수 있다.

디버깅 어려움: 양방향 데이터 바인딩은 데이터 흐름이 복잡할 경우 버그를 디버깅하기 어려울 수 잇다. 어떤 요소가 데이터를 변경하는지 추적하기 어려울 수 있다.