JavaScript에서 트리 구조를 평면화하는 두 가지 방법

소개

프런트엔드 개발에서는 백엔드 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에서 트리 구조를 평면화하는 두 가지 방법인 재귀 처리와 비재귀 처리를 소개합니다. 재귀적 처리는 일반적으로 사용되는 방법이지만 데이터가 클 경우 성능 문제가 발생할 수 있습니다. 비재귀적 처리는 재귀적 호출의 성능 오버헤드를 피하기 위해 스택이나 큐와 같은 데이터 구조를 사용하며 일반적으로 더 빠릅니다. 실제 요구 사항과 데이터 규모에 따라 프런트 엔드 개발에 더 나은 적용을 위해 트리 구조의 데이터를 처리하는 적절한 방법을 선택할 수 있습니다.

JavaScript에서 트리 구조를 평면화하는 두 가지 방법

추천