[JS] 데이터 바인딩 이해하기(단방향, 양방향 데이터 바인딩)

해당 글에서는 '데이터 바인딩'에 대해서 이해를 하고, 더 나아가서 '단방향/양방향 데이터 바인딩'에 대해 이해하기 위한 글입니다.

 

 

1) 데이터 바인딩(Data Binding)이란?

---

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

💡 예를 들어서 HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주고 있다고 가정을 했을 때, 해당 값이 변경이 될 경우 다시 HTML 상에 데이터(값)를 변경된 값에 따라서 맞추어 주는 동작을 '데이터 바인딩'이라고 합니다.

 

[ 간단한 예제 - 1 ] 값을 데이터 바인딩한다.
💡 아래의 예제는 함수형 컴포넌트 안에서 ‘initData’로 초기화 한 값을 최초 HTML상에 출력합니다. 이후 ‘재 데이터 바인딩’ 버튼을 누르면 상태 값을 변경시키고, HTML에서 데이터 바인딩을 하는 예시입니다.

import React, { useState } from 'react';
import { CommonType } from '../../type/common/CommonType';

const DataBindingBasicComponent = () => {

    /**
     * 브라우져 메모리상에 존재하는 데이터 
     */
    const [initData, setInitData] = useState({
        greet: "안녕하세요",
        info: "데이터 바인딩에 대해서 공부하고 있습니다."
    });
    
    /**
     * 버튼을 클릭하면 상태로 지정한 메모리로 데이터를 바인딩 한다.
     */
    const reDataBinding = () => {
        setInitData({
            greet: "다시 한번 반갑습니다",
            info: "데이터를 바인딩 합니당"
        })
    };
    return (
        <div>
            <h1>{initData.greet}</h1>
            <h2>{initData.info}</h2>
            <button onClick={reDataBinding}>재 데이터 바인딩</button>
        </div>
    );
}

export default DataBindingBasicComponent;

 

 

[ 간단한 예제 - 2 ] CSS 값(스타일)을 데이터 바인딩한다.
💡 아래의 예제는 함수형 컴포넌트 안에서 ‘initCSSStyle’로 초기화 한 ‘스타일’을 최초 HTML상에 출력합니다. 이후 ‘재 데이터 바인딩’ 버튼을 누르면 상태 값을 변경시키고, HTML에서 데이터 바인딩을 하는 예시입니다.

import React, { useState } from 'react';
const DataBindingCSSComponent = () => {

    /**
     * 브라우져 메모리상에 존재하는 데이터(CSS Style) 
     */
    const [initCSSStyle, setInitCSSStyle] = useState({
        color: "red",
        fontSize: "30"
    });

    /**
     * 버튼을 클릭하면 상태로 지정한 메모리로 데이터를 바인딩 한다.
     */
    const reDataBinding = () => {
        setInitCSSStyle({
            color: "yellow",
            fontSize: "50"
        });
    };
    return (
        <div>
            <h1 style={initCSSStyle}>안녕하세요</h1>
            <h2 style={initCSSStyle}>만나서 반갑습니다.</h2>
            <button onClick={reDataBinding}>재 데이터 바인딩</button>
        </div>
    )
}
export default DataBindingCSSComponent;

 

 

2) 단방향 데이터 바인딩(One-way Data Binding)이란?

---

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

💡 단방향 데이터 바인딩이기에 역으로 HTML(View)에서 JS(Model)로의 직접적인 데이터 갱신은 불가능합니다. '이벤트 함수(onClick, onChange,...)'를 주고 함수를 호출한 뒤 Javascript에서 HTML로 데이터를 변경해야 합니다. [HTML(View) -> JS(Model)]

💡 컴포넌트 간에서 단방향 데이터 바인딩은 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 전달되는 구조입니다.

💡 대표적으로 SPA Framework에서는 React에서 단방향 데이터 바인딩을 합니다.

 

 

3) 양방향 데이터 바인딩(Two-way Data Binding)이란?

---

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

💡 컴포넌트 간에서는 부모 컴포넌트에서 자식 컴포넌트로는 Props를 통해 데이터를 전달하고, 자식 컴포넌트에서 부모 컴포넌트로는 Emit Event를 통해서 데이터를 전달하는 구조입니다.

💡 대표적으로 SPA Framework에서는 Vue.js, Angular에서 양방향 데이터 바인딩을 합니다.

 

 

4) 오늘의 결론

---

💡 오늘은 데이터 바인딩에 대해서 공부해 보았습니다.
💡 컴포넌트 내에서 혹은 컴포넌트 간에 데이터가 바인딩을 이해한다면 좀 더 보이는 시야가 넓어질 것 같습니다.

오늘도 감사합니다😀