[jquery] 단순 DOM 데이터 바인딩

들어가기

HTML에서 화면에서 데이터를 추출하고 처리하는 부분이 귀찮은 일이다. 대부분 화면 컨트롤에서 데이터를 가져오고, 가져온 데이터를 화면에 적용하는 일이 매우 많다. 이를 개선해서 출력과 입력을 처리하는 바인딩하는 작업을 만들어보았다. 즉, 데이터 객체와 DOM 객체 간에 양방향 바인딩 처리하는 작업이다. 데이터에 값을 저장하면 자동으로 화면에 적용되고, 컨트롤에 값을 입력하면 자동으로 화면에 출력된다. 어떻게 하는지 살펴보자.

작성자: ospace114@empal.com, http://ospace.tistory.com/

기존 처리 방식

Ajax을 많이 활용하면 화면에 동적으로 처리해야하는 작업이 많다. 예를 들어 아래 처럼 입력 텍스트와 입력된 텍스트를 아래에 텍스트로 출력하는 예를 보자. 텍스트용 Input 컨트롤과 텍스트 출력용 span이 있다.

<div><input id="inputTitle" type="text" placeholder="Input Title" /></div>
<div>url:<span id="url"></span></div>

Fig 01. 단순화면구성

데이터를 가져와서 input와 span에 출력하고, 다시 input에서 텍스트를 추출해서 데이터에 저장하는 작업을 보자.

var data = {title: "", url: "https://ospace.tistory.com"};

// 데이터 화면 출력
$('#inputTitle').val(data.title);
$('#url').html(data.url);

// 입력 데이터 저장
data.title = $('#inputTitle').val();

대부분 입력과 출력을 각자 처리해야한다. 입력하는 부분은 제어하는데 번거로움이 있다. 값이 변경되는 이벤트를 감지해서 처리해야 하거나 특정 액션이 발생할 경우 처리한다. 매번 모든 컨트롤을 같은 작업을 처리해줘야 한다.

DOM 바인딩

데이터와 DOM 객체가 바인딩되면 데이터에 값을 저장하면 DOM에 바로 반영되고 DOM에 값이 변경되면 데이터에 바로 저장되는 경우라면 쉽게 처리할 수 있게 된다. 아래 jsbind는 데이터와 DOM 객체간에 양방향 바인딩 기능 제공하고 jquery를 사용하여 코드를 단순화 및 쉬운 확장성을 제공한다.

const obind= (function() {
    function getter($target) {
        if (undefined === $target.prop('value')) {
            return $target.html();
        } else {
            return $target.val();
        }
    }

    function setter($target, val) {
        if (undefined === $target.prop('value')) {
            $target.html(val);
        } else {
            $target.val(val);
        }
    }

    return function (source, $target, property) {
        property = property || $target.attr('name');
        if (!property) throw Error('property is necessary.');

        var value = source[property];

        Object.defineProperty(source, property, {
            get: function() { return getter($target) },
            set: function(val) { setter($target, val) },
        });

        source[property] = value;
    }
})();

별도 “obind.js” 파일로 작성해서 사용할 때마다 가져오게 한다.

단순 출력

span 태그를 이용한 화면 출력하는 간단한 예를 보자. span 태그와 바인딩할 데이터 속성 명시 필요하다. “data.url”에 있는 값이 화면에 출력된다.

obind(data, $('#url'), 'url');

텍스트 입력

input 컨트롤 중에 text 입력 처리해보자. input 컨트롤의 name 속성 활용해서 별도 속성을 명시할 필요가 없다. name 속성을 사용하지 않는다면 명시해야 한다.

obind(data, $('#inputTitle'));

전체 소스코드

한개의 텍스트 입력과 한개 텍스트 출력을 처리하고 Check 버튼에 의해 data 객체 내용을 팝업창으로 표시하게 했다.

<section>
    <div><input id="inputTitle" type="text" name="title" placeholder="Input Title" /></div>
    <div>URL: <span id="url"></span></div>
    <div><button onclick="onCheck()">Check</button></div>
</section>
<script src="obind.js"></script>
<script>
    var data = { title: '', url: 'https://ospace.tistory.com' };

    function onCheck() {
        alert(JSON.stringify(data));
    }

    obind(data, $('#inputTitle'));
    obind(data, $('#url'), 'url');
</script>

결론

텍스트 입력과 단순 HTML 출력만 가능하다. 주의할 점은 다중 바인딩은 안된다. 즉, data의 값을 여러 화면 컨트롤과 연결할 수 없다. 물론 다중 바인딩할 수 있지만 이것저것 고려하기시작하면 복잡해지기 때문에 최대한 단순하게 만들어서 아이디어 차원에서 공유했다. 이후부터는 확장하면 된다. 아주 쉽다. ㅡ.ㅡ;;; 물론 obind가 모든 부분을 제어하지는 못하지만 잘 사용하면 효과적으로 화면 입출력을 빠르게 처리할 수 있다.

부족한 글이지만 여러분에게 도움이 되었으면 하네요. 모든 즐거운 코딩생활되에요. ospace.

참조

[1] JQuery official site, https://jquery.com/

[2] Object.defineProperty(), https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty