트리에서 자식의 값을 반환하는 방법

marie·2024년 10월 30일
0

JavaScript

목록 보기
7/7
post-thumbnail

예시

const treeData = [
        {
            title: 'A',
            fullPath: '/',
            children: [
                {
                    title: 'a',
                    fullPath: '/A',
                    children: [
                        { title: 'aa', fullPath: '/A/a', children: [] },
                        { title: 'bb', fullPath: '/A/a', children: [] },
                        { title: 'cc', fullPath: '/A/a', children: [] },
                    ],
                },
                { title: 'b', fullPath: '/A', children: [] },
                { title: 'c', fullPath: '/A', children: [] },
            ],
        },
        {
            title: 'B',
            fullPath: '/',
            children: [
                {
                    title: 'a',
                    fullPath: '/B',
                    children: [{ title: 'aa', fullPath: '/B/a', children: [] }],
                },
            ],
        },
        {
            title: 'C',
            fullPath: '/',
            children: [
                { title: 'a', fullPath: '/C', children: [] },
                {
                    title: 'b',
                    fullPath: '/C',
                    children: [
                        { title: 'aa', fullPath: '/C/b', children: [] },
                        { title: 'bb', fullPath: '/C/b', children: [] },
                        {
                            title: 'cc',
                            fullPath: '/C/b',
                            children: [
                                {
                                    title: 'aaa',
                                    fullPath: '/C/b/cc',
                                    children: [],
                                },
                            ],
                        },
                    ],
                },
            ],
        },
    ];

특정 path를 주면 해당 path의 children을 return 해주는 함수 만들기

🔹 원하는 결과
(밑에서 동작 과정 자세히 설명 😊)

findChildrenByPath(treeData, '/A/a'); 

// 예상 출력: [{ title: 'aa', fullPath: '/A/a', children: [] }, ...]

🔹 코드

const findChildrenByPath = (tree, path) => {
    for (const node of tree) {
        if (node.fullPath === path) {
            return node.children;
        }
        if (node.children.length > 0) {
            const result = findChildrenByPath(node.children, path);
            if (result !== null) return result;
        }
    }
    return null; // Path not found
};

🔹 동작 흐름

  1. for 루프: 각 노드를 하나씩 탐색
  • 함수는 주어진 tree 배열의 각 요소(node)를 순회
  • tree는 최상위의 전체 데이터이며, node는 개별적인 노드 객체
  1. if 문으로 fullPathpath 와 같은지 확인
  • node 가 찾고자 하는 path 를 가지고 있는지 확인하는 단계
  • nodefullPathpath 와 일치하면, 찾고자 하는 경로에 도달 ➡ node.children 을 반환
  1. 재귀 호출로 자식 노드까지 탐색
  • node 가 원하는 경로가 아닐 경우, node.children 이 있는지 확인
  • children 이 있는 경우만 재귀 호출
  • 재귀 호출로 하위 노드에서도 path 를 찾는다
  1. 재귀 결과 확인
  • 재귀 호출이 반환한 결과(result)가 null 이 아니라면, 찾은 children 배열을 반환
  • 다른 경로의 탐색을 중단하고 곧바로 최종 결과를 반환
  1. 전체 트리 탐색 후에도 없을 경우 null 반환
  • 루트부터 자식 노드까지 모두 순회했지만 일치하는 path 를 찾지 못하면 null 을 반환

🔹 예시와 함수의 동작 과정
findChildrenByPath(treeData, '/A/a')

  1. 루트 트리에서 첫 번째 node"A" 를 확인 (fullPath: '/')
    /A/a 와 다르기 때문에, "A"children 으로 이동

  2. "A"children 에서 "a" 를 확인 (fullPath: '/A')
    /A/a 와 다르므로 "a"children 으로 이동

  3. "a"children 에서 node 들 중 첫 번째인 "aa"fullPath/A/a 와 일치
    children 을 반환

  4. 결과

[
  { title: 'aa', fullPath: '/A/a', children: [] }, 
  { title: 'bb', fullPath: '/A/a', children: [] }, 
  { title: 'cc', fullPath: '/A/a', children: [] }
]
profile
FE developer👩🏻‍💻

0개의 댓글