[JavaScript] 트리 생성 코드 - 재귀호출을 사용하여 Array를 Tree 형태로 변환

트리뷰 등에서 활용하려면 배열 형태로 된 데이터를 트리 구조로 변환해줄 필요가 있다.
일반적으로 id와 parent id값을 갖고 있어서 parent id 를 통해 부모를 찾고 계층 구조로 연결해주는 방식을 취한다.

더 좋은 방식이 많이 있겠지만, 비교적 무난한 코드라고 생각되어 공개한다. 원본 배열을 변경시키는 방식으로 진행하기 때문에 원본 배열이 필요하다면 따로 복사해둘 필요가 있다.



트리 모델 변환 소스

//트리 변환 메서드
var treeModel = function (arrayList, rootId) {
	var rootNodes = [];
	var traverse = function (nodes, item, index) {
		if (nodes instanceof Array) {
			return nodes.some(function (node) {
				if (node.id === item.parentId) {
					node.children = node.children || [];
					return node.children.push(arrayList.splice(index, 1)[0]);
				}

				return traverse(node.children, item, index);
			});
		}
	};

	while (arrayList.length > 0) {
		arrayList.some(function (item, index) {
			if (item.parentId === rootId) {
				return rootNodes.push(arrayList.splice(index, 1)[0]);
			}

			return traverse(rootNodes, item, index);
		});
	}

	return rootNodes;
};

기본적으로는 While 문에서 루프를 돌면서 루트 노드들을 찾는다. 루트 노드가 아닌 경우 부모 노드를 재귀호출을 통해 찾도록 넘기게 된다. 부모 노드를 찾는 재귀호출 부분은 현재 레벨에서 부모 노드를 찾다가 없으면 자식 노드들이 존재할 경우 또다시 자식 노드들도 재귀호출을 하는 형태이다.

jsFiddle을 통해 실제로 돌아가는 예제를 살펴보면 이해가 빠를 것이다.



실제 변환 예제



위의 jsFiddle을 통해 실제 변환이 어떻게 이루어지는지 간단하게 확인해볼 수 있다.



결론

위의 Tree Model 생성 함수가 범용적으로 모든 케이스에 쓰일 수 있는 것은 아니지만, 대부분의 경우에 적실하게 기대한 성능과 결과물을 내주는데는 큰 문제가 없을 것이라 본다.