Javascript 동적 UI 만들기

Event Listener 등록

Event Listener를 DOM load 후에 등록하여 조건에 따라 UI가 바뀌게 해야한다.

document.addEventListener("DOMContentLoaded", function() {
    var list = document.querySelectorAll("div");
    for(var i = 0 len = list.length; i < len; i++) {
        list[i].addEventListener("click", function() {
            console.log(list[i]);
        });
    }
});

위와 같이 "DOMContentLoaded"를 매개변수로 넣어서 document에 event listener를 등록할 수 있다. 추가로 querySelector 함수를 이용해 하위에 있는 태그들을 검색하여 사용할 수 있다.

1. obj.querySelector("ul")
   obj 하위에 있는 ul 태그 중 첫번 째 태그를 가져온다.
2. obj.querySelector("ul li:nth-child(2)");
   obj->ul 하위에 있는 li 태그 중 두번 째 태그를 가져온다.

event listener를 등록 시 부모 태그에 등록을 하면, 하위 태그에도 적용이 된다. 다만, 하위 태그에도 event listner가 등록 돼있다면, 하위 태그 것이 먼저 호출된다.

[그림 1] Event Bubbling

위 그림 1처럼 하위 태그의 event가 먼저 발생한다. 이것을 Event Bubbling이라고 부른다.

UI Template

var html = "<ul><h1>{name}<h1><p>{data}</p></ul>";
var resultHtml = html.replace("{name}", "aaa")
                     .replace("{data}", "bbb");

위 코드처럼 HTML template으로 사용할 코드를 javascript 변수로 지정해 놓고, replace 함수를 사용하여 특정 부분을 다른 값으로 변경할 수 있다. 이런 특성은 JSON Object와 같이 사용할 때 더욱 효과적이다.

var jobj = JSON.parse(str);
var resultHtml = html.replace("{name}", jobj.name)
                     .replace("{data}", jobj.data);

var container = document.querySelector("#container");
container.appendChild(resultHtml);

이렇게 되면 서버와 Ajax로 통신하며 HTML 코드를 동적으로 변경할 수 있다.

또한 HTML template은 아래처럼 HTML 코드 내에 정의한 뒤 참조하여 사용할 수도 있다.

<script id="template-list-item" type="text/template">
    <h1>{name}</h1>
    <p>{data}</p>
</script>

var html = document.querySelector("#template-list-item").innerHTML;

비동기 통신

비동기 요청에 대한 응답으로 받은 responseText를 JSON Object로 변환 후, 위에서 다룬 HTML template을 이용해 동적으로 UI를 구성한다.

function sendAjax(url) {
    var oReq = new XMLHttpRequest();
    oReq.addEventListener("load", function () {
        // 응답 문자열을 JSON 객체로 변환 후 동적 UI 구성
        var data = JSON.parse(oReq.responseText);
        
        ... HTML template을 이용해 동적으로 UI 구성
    });
    // 비동기 요청 보내기
    oReq.open("GET", url);
    oReq.send();
}
​
var reqBtn = document.querySelector("#request_btn");
reqBtn.addEventListener("click", function (evt) {
    sendAjax("./json.txt");
});