소개
프런트엔드 개발에서는 백엔드 API나 기타 데이터 소스에서 나올 수 있는 트리 구조의 데이터를 자주 접하게 됩니다. 이러한 데이터를 보다 편리하게 처리하려면 표시나 기타 작업을 위해 평면 구조로 변환해야 합니다. 이번 블로그에서는 JavaScript에서 트리 구조를 평면화하는 두 가지 방법인 재귀 처리와 비재귀 처리를 소개합니다.
데이터 예
먼저 트리 구조 데이터를 나타내는 샘플 데이터를 제공하며 각 노드에는 id, parentId 및 name 속성이 있습니다.
const data = [
{ id: 1, parentId: 0, name: 'A' },
{ id: 2, parentId: 0, name: 'B' },
{ id: 3, parentId: 1, name: 'A-1' },
{ id: 4, parentId: 1, name: 'A-2' },
{ id: 5, parentId: 2, name: 'B-1' },
{ id: 6, parentId: 3, name: 'A-1-1' },
{ id: 7, parentId: 3, name: 'A-1-2' },
{ id: 8, parentId: 6, name: 'A-1-1-1' },
{ id: 9, parentId: 2, name: 'B-2' }
];
방법 1: 재귀적 처리
재귀 처리는 트리 구조를 처리하는 일반적인 방법입니다. 기본 아이디어는 루트 노드에서 시작하여 트리 레이어의 각 노드를 레이어별로 순회하고 해당 상위 노드의 속성에 하위 노드를 추가하는 것입니다 children
.
function formatDataTree (data){
let parents = data.filter(p => p.parentId == 0),
children = data.filter(c => c.parentId != 0);
dataToTree(parents, children);
return parents;
function dataToTree (parents, children) {
parents.map(p => {
children.map((c, i) => {
if (c.parentId == p.id) {
let _c = JSON.parse(JSON.stringify(children));
_c.splice(i, 1);
dataToTree([c], _c);
// if(p.children)
// p.children.push(c);
// else
// p.children = [c];
typeof p.children !== 'undefined' ? p.children.push(c) : p.children = [c];
}
});
});
}
}
코드 분석
formatDataTree
먼저, 트리 구조의 데이터 배열을 매개변수로 사용하는 함수를 정의합니다 .- 우리는
filter
이 메서드를 사용하여 루트 노드와 루트가 아닌 노드를 각각 필터링하고 가져오고parents
배열 합니다children
. dataToTree
그런 다음 재귀 처리를 위해 함수를 호출합니다 .dataToTree
함수 에서는map
각 부모 노드를 순회하는 방법을 사용하고,map
각 자식 노드를 순회하는 방법을 사용하여 해당 부모 노드를 찾아 트리 구조를 구축합니다. 재귀 중에 원본 데이터가 수정되지 않도록 배열을JSON.parse(JSON.stringify(children))
복사하는 데 사용됩니다 .children
- 상위 노드가 발견되면
children
배열에서 하위 노드를 제거하고 하위 노드를 상위 노드의children
속성 에 추가합니다.
방법 2: 비재귀적 처리
비재귀적 처리란 스택이나 큐 등의 데이터 구조를 이용하여 트리 구조를 처리하는 방법이다. 재귀 호출의 성능 오버헤드를 방지하고 일반적으로 더 빠르게 실행됩니다.
function formatDataTree (data){
let _data= JSON.parse(JSON.stringify(data));
return _data.filter(p => {
const _arr= _data.filter(c => c.parentId === p.id);
_arr.length && (p.children= _arr);
return p.parentId === 0;
});
}
코드 분석
formatDataTree
트리 구조의 데이터 배열을 매개변수로 사용하는 함수를 정의합니다 .- 첫째, 원본 데이터의 수정을 피하기 위해
JSON.parse(JSON.stringify(data))
데이터의 복사본을 만드는 데 사용됩니다 ._data
- 그런 다음 필터링
filter
하는 방법을 사용합니다 ._data
각 상위 노드에 대해filter
메서드를 통해 모든 하위 노드를 찾고_arr
하위 노드를children
상위 노드의 속성에 할당합니다. - 마지막으로 0인 루트 노드를 반환합니다
parentId
.
작업 결과
children
재귀적 처리 또는 비재귀적 처리가 사용되는지 여부에 관계없이 작업의 결과는 각 노드가 하위 노드를 저장하기 위한 속성을 포함하는 트리 구조의 배열이 됩니다 . 주어진 예제 데이터의 경우 두 접근 방식 모두 동일한 결과를 제공합니다.
요약하다
이 블로그에서는 JavaScript에서 트리 구조를 평면화하는 두 가지 방법인 재귀 처리와 비재귀 처리를 소개합니다. 재귀적 처리는 일반적으로 사용되는 방법이지만 데이터가 클 경우 성능 문제가 발생할 수 있습니다. 비재귀적 처리는 재귀적 호출의 성능 오버헤드를 피하기 위해 스택이나 큐와 같은 데이터 구조를 사용하며 일반적으로 더 빠릅니다. 실제 요구 사항과 데이터 규모에 따라 프런트 엔드 개발에 더 나은 적용을 위해 트리 구조의 데이터를 처리하는 적절한 방법을 선택할 수 있습니다.