Salesforce Tree Grid JavaScript 로직 구현_v2

Salesforce에서 조직도를 구현할 때 lightning:treeGrid를 활용하면 계층 구조를 시각적으로 표현할 수 있습니다. 기존 로직 Salesforce Tree Grid 에서 삼항 연산자를 사용했던 부분을 보다 직관적으로 이해할 수 있도록 if 문을 활용하여 수정하였으며, 조직 데이터를 트리 구조로 변환하는 과정을 자세히 설명합니다.

1. 개요

조직도를 구현하는 핵심은 최상위(root) 노드를 추출하고, 하위(children) 노드를 부모-자식 관계로 연결하는 것입니다. 이를 위해:

• roots[] 배열에는 최상위 노드를 저장합니다.
• _children{} 객체에는 상위 ID를 기준으로 하위 노드를 저장합니다.
• findChildren 함수를 활용하여 계층 구조를 구축합니다.

2. 데이터 구조

var items = [
    {"Id": "1", "Name": "가", "upperId": ""},
    {"Id": "2", "Name": "나", "upperId": "1"},
    {"Id": "3", "Name": "다", "upperId": "1"},
    {"Id": "4", "Name": "라", "upperId": "3"},
    {"Id": "5", "Name": "마", "upperId": "3"},
    {"Id": "6", "Name": "바", "upperId": "2"},
    {"Id": "7", "Name": "사", "upperId": "6"},
    {"Id": "8", "Name": "가", "upperId": ""}
];

각 항목에는 Id, Name, upperId 값이 있으며, upperId가 없는 항목이 최상위(root) 노드입니다.

3. 조직 데이터를 계층 구조로 변환하는 로직

1) roots[] 및 _children{} 초기화

var roots = []; // 최상위 노드를 저장할 배열
var _children = {}; // 부모 ID를 키로 하위 노드를 저장할 객체

2) 데이터 분류 (최상위 노드 vs. 하위 노드)

for (var i = 0; i < items.length; i++) {
    var item = items[i];
    var p = item.upperId;
    var target = [];

    if (!p) {
        // 상위 ID가 없으면 최상위 노드
        target = roots;
    } else {
        if (_children[p]) {
            target = _children[p];
        } else {
            _children[p] = [];
            target = _children[p];
        }
    }
    target.push(item);
}

3) 재귀적으로 계층 구조를 구성하는 findChildren 함수

var findChildren = function(upperId) {
    if (_children[upperId.Id]) {
        upperId._children = _children[upperId.Id];
        for (var i = 0, len = upperId._children.length; i < len; ++i) {
            findChildren(upperId._children[i]);
        }
    }
};

4) 최상위 노드에서 findChildren 호출하여 트리 구축

for (var i = 0, len = roots.length; i < len; ++i) {
    findChildren(roots[i]);
}

4. 결과 예시

최종적으로 roots 배열은 계층 구조를 가지게 되며, lightning:treeGrid에서 활용할 수 있는 형태로 변환됩니다.

[
    {
        "Id": "1", "Name": "가", "upperId": "",
        "_children": [
            {
                "Id": "2", "Name": "나", "upperId": "1",
                "_children": [
                    { "Id": "6", "Name": "바", "upperId": "2", "_children": [...] }
                ]
            },
            {
                "Id": "3", "Name": "다", "upperId": "1",
                "_children": [
                    { "Id": "4", "Name": "라", "upperId": "3" },
                    { "Id": "5", "Name": "마", "upperId": "3" }
                ]
            }
        ]
    },
    {
        "Id": "8", "Name": "가", "upperId": ""
    }
]

5. 결론

이전 버전에서 사용했던 삼항 연산자를 if 문으로 변환하여 가독성을 높였으며, findChildren 함수를 활용하여 트리 구조를 완성하는 방법을 개선했습니다.

주요 개선 사항:

• 가독성 향상: 삼항 연산자 대신 if 문 사용
• 명확한 로직 설명: _children을 활용하여 부모-자식 관계를 효율적으로 구성
• 재귀 호출 최적화: findChildren 함수 사용하여 계층 구조 자동 구성

이 코드를 활용하면 Salesforce lightning:treeGrid에서 조직도를 보다 직관적이고 쉽게 구현할 수 있습니다.