[Algorithm] 재귀 알고리즘 Tree UI 구현하기

 

450

 

Tree 자료구조 with 재귀 알고리즘

 

재귀 알고리즘을 사용하기 최적화된 환경이 바로 트리 자료구조다. 자식 노드들을 찾아가면서 해당 노드들을 반복적으로 렌더링 하는 과정에서 몇번의 반복이 예측하기 힘든 반복문 보다는 재귀 알고리즘이 적합하다.

 

문제 : 트리 구조의 데이터를 재귀함수를 이용해 렌더링 하세요

 

풀이 : 

재귀 알고리즘을 구성할 때는 탈출 조건(base case)와 재귀 로직으로 구분해서 생각해야 한다.

① 첫번째 순서로 currentNode에 추가할 'li' 태그를 생성하고 자식 노드의 배열이 포함되어 있는지 여부를 체크한다.

const res = document.createElement('li');
const hasChildren = Array.isArray(menu[i].children);

 

② 두번째 순서로 자식노드가 존재하는 경우와 아닌 경우로 구분한다.

자식 노드가 존재하지 않는 경우 name 값만 추가해준다. 

자식 노드가 존재하는 경우 <input>,<span>,<ul> 태그들을 차례로 생성해준다. 이 후 재귀 함수를 호출한다. <li> 태그의 데이터를 채우는 경우는 재귀 알고리즘의 탈출조건이 충족되었을 경우다. 이 겨우 자식노드가 존재하지 않는 경우 name 값만 출력하는 곳이 재귀 탈출 조건이 된다.

<ul>
	<li>탈출조건 도달 시 데이터 삽입</li>
    <li></li>
    <li></li>
</ul>

if(hasChildren){
  const inputTag = document.createElement('input');
  const spanTag = document.createElement('span');
  const newUl = document.createElement('ul');

  inputTag.type = 'checkbox'
  spanTag.textContent = `${menu[i].name}`;

  res.append(inputTag, spanTag, newUl);
  currentNode.appendChild(res);

  createTreeView(menu[i].children, newUl);
}else{
  res.textContent = `${menu[i].name}`
  currentNode.append(res);
}

 

 

입력소스 : 

const menu = [
  {
    type: 'groupName',
    name: 'name1',
    children: [
      {
        type: 'groupName',
        name: 'name1-1',
        children: [
          { type: 'item', name: 'name1-1-1' },
          { type: 'item', name: 'name1-1-2' },
          { type: 'item', name: 'name1-1-3' },
          { type: 'item', name: 'name1-1-4' },
        ],
      },
      {
        type: 'groupName',
        name: 'name1-2',
        children: [
          { type: 'item', name: 'name1-2-1' },
          { type: 'item', name: 'name1-2-2' },
          { type: 'item', name: 'name1-2-3' },
          { type: 'item', name: 'name1-2-4' },
        ],
      },
   },
];

소스코드 : 

const root = document.getElementById('root');
function createTreeView(menu, currentNode) {
  // TODO: createTreeView 함수를 작성하세요.
  
  for(let i=0; i<menu.length; i++){
    const res = document.createElement('li');
    const hasChildren = Array.isArray(menu[i].children);

    if(hasChildren){
      const inputTag = document.createElement('input');
      const spanTag = document.createElement('span');
      const newUl = document.createElement('ul');
      
      inputTag.type = 'checkbox'
      spanTag.textContent = `${menu[i].name}`;
      
      res.append(inputTag, spanTag, newUl);
      currentNode.appendChild(res);

      createTreeView(menu[i].children, newUl);
    }else{
      res.textContent = `${menu[i].name}`
      currentNode.append(res);
    }    
  }
}
createTreeView(menu, root);

 

 

Tree UI 구현하기 정리

 

재귀 알고리즘은 다양한 곳에 사용되지만 반복적인 태그로 구성된 트리 자료구조에서 작합한 알고리즘이다. 특히 HTML 소스 처럼 구조화된 데이터에서 반복횟수를 알지 못하는 경우 재귀 함수를 사용할 수 있다.

Element를 생성하고, 데이터를 추가한 뒤 부모 태그에추가하는 작업이 이해가 어려울 수도 있지만, 재귀는 결국 탈출 조건과 재귀 로직 두 부분으로 구성된다는 것만 알면 쉽게 구현할 수 있다.