[Javascript] 내장 함수(inner function)를 활용한 동적인 DOM 구현

자바스크립트로 코딩을 하다보면 모르는 상태로 일단 쓰다가 나중에 개념을 알게 되는 경우가 많은 것 같다. 그 중 하나인 내장 함수의 개념을 먼저 코드로 정리해보자면 이렇다. 

function outer(){

    var introduce="My ";

    inner1();
    inner2();

    function inner1(){
        introduce += "name is ";
        return introduce;
    }

    function inner2(){
        introduce += "Gomak";
        return introduce;
    }

    console.log(introduce);
}

- 자바스크립트에서는 함수 안에 또 다른 함수, 즉 inner function을 여러 개 정의할 수 있다.
- 각각의 inner function에서는 outer function에 선언되어 있는 전역 변수에 접근할 수 있다.
- 유사한 맥락으로 nested function, clousure가 있음.

 

이 개념을 DOM을 구성하는데 적용해보면, 같은 페이지 안에서 특정 조건에 따라 다른 DOM을 구성해야 하는 리스트 같은 경우의 문제를 해결할 수 있다. 실제 활용 사례를 보자.

    function filterActiveList(sevices){

        // Initialize Global Variable that Creating DOM
        var serviceContent = "";

        for(service of services){
            if(service.serviceRegisterIsActive == true){
                showActiveItem(service);
            } else if(service.serviceRegisterIsActive == false){
                showDeactiveItem(service);
            }
        }

        function showActiveItem(service) {

            serviceContent += '<li><div class="list-box-listing"><div class="list-box-listing-img">'
                +'<a href="" onclick="serviceReadOnly(service.serviceId);"><img src="'+service.serviceImgUri+'" alt=""></a></div>'
                +'<div class="list-box-listing-content"><div class="inner"><h3><a href="#" onclick="serviceReadOnly(service.serviceId);">'
                +service.serviceTitle+'</a></h3><span>'+service.serviceAddress.addressState+'</span>&nbsp;<span>'+service.serviceAddress.addressCity
                +'</span>&nbsp;<span>'+service.serviceAddress.addressDong+'</span></div></div></div><div class="buttons-to-right">'
                +'<label class="switch"><input type="checkbox" checked><span class="slider round"></span></label></div></li>';

            return serviceContent;

        }

        function showDeactiveItem(service) {

            serviceContent += '<li><div class="list-box-listing"><div class="list-box-listing-img">'
                +'<a href="" onclick="serviceReadOnly(service.serviceId);"><img src="'+service.serviceImgUri+'" alt=""></a></div>'
                +'<div class="list-box-listing-content"><div class="inner"><h3><a href="#" onclick="serviceReadOnly(service.serviceId);">'
                +service.serviceTitle+'</a></h3><span>'+service.serviceAddress.addressState+'</span>&nbsp;<span>'+service.serviceAddress.addressCity
                +'</span>&nbsp;<span>'+service.serviceAddress.addressDong+'</span></div></div></div><div class="buttons-to-right">'
                +'<label class="switch"><input type="checkbox" unchecked><span class="slider round"></span></label></div></li>';

            return serviceContent;
        }

        document.querySelector('#wrap-list').innerHTML = serviceContent;
    }

해결해야 할 문제는 JSON 데이터를 가져와 serviceRegisterIsActive 라는 컬럼의 상태에 따라 Active List 또는 Deactive List를 짜야하는 것이다. 먼저 전역변수로 serviceContent를 선언한 후, for~of문을 돌며 대상 컬럼을 체크해 상태에 상태에 맞는 내장함수(DOM을 짜주는)로 데이터를 보낸다. 각각의 내장함수가 데이터를 받을 때마다 DOM을 짠 후 return하는 코드가 순서대로 전역변수 serviceContent에 누적되었을 것이다. 

결과적으로 spring pagable에서 데이터를 정렬해서 보내준 순서를 유지하면서도 필터 조건에 따라 동적으로 돔을 찍어낼 수가 있다...!