DHTMLX 기본 사용법 요약 - div에 UI 컴포넌트 붙이기

원본 작성일: 2013.04.16
보완 작성일: 2026.02.14

DHTMLX는 JavaScript UI 라이브러리로, div 영역에 layout, toolbar, grid, tree 같은 컴포넌트를 붙여서 웹 애플리케이션 UI를 만드는 방식이다. 사용법이 직관적이고 API 문서가 잘 되어 있어서 러닝커브가 낮았다.

2026년 기준: DHTMLX는 여전히 유지보수되고 있다 (v8.x). 다만 신규 프로젝트에서는 React, Vue 같은 프레임워크가 주류이고, UI 라이브러리도 Ant Design, MUI 같은 선택지가 많다. 레거시 시스템 유지보수 시 참고용으로 남겨둔다.

기본 구조

1. CSS/JS 로드

<link rel="stylesheet" type="text/css" href="../libs/dhtmlx/dhtmlx.css" />
<script type="text/javascript" src="../libs/dhtmlx/dhtmlx.js"></script>

2. 영역 정의

<div id="objId" style="position:absolute; width:1024px; height:600px;"></div>

3. 레이아웃 생성

// "1C"는 1칸짜리 레이아웃 패턴
var dhxLayout = new dhtmlXLayoutObject("objId", "1C");

레이아웃 패턴은 "2U", "3L", "4H" 등 다양하다. 각 영역은 cells("a"), cells("b") 등으로 접근한다.

4. 컴포넌트 붙이기

// 트리 컴포넌트 생성
var dhxTree = dhxLayout.cells("a").attachTree();
dhxTree.setImagePath("../img/dhtmlxTree/");
dhxTree.insertNewChild(0, "root", "/");

// 이벤트 바인딩
dhxTree.attachEvent("onDblClick", function(id) {
    alert("더블클릭: " + id);
});

사용 가능한 컴포넌트

컴포넌트	용도
Layout	화면 분할
Toolbar	상단 도구 모음
Tabbar	탭 UI
Grid	테이블/데이터 표시
Tree	트리 메뉴
Menu	드롭다운 메뉴
Form	입력 폼

핵심은 간단하다: div 잡고 → 레이아웃 만들고 → 영역에 컴포넌트를 attach. 메서드명이 직관적이라 API 문서에서 get/set으로 검색하면 대부분 찾을 수 있다.