S3) Unit 1. [실습] Tree UI

📣 재귀로 Tree UI 구현하기

1️⃣ Test 조건

✔️ <ul id="root"> 안에 tree view를 구성합니다.
✓ ul#root 엘리먼트가 존재해야 합니다.
✓ ul#root 엘리먼트 안에 tree view를 구현해야 합니다.

✔️ menu 데이터를 사용해 tree view를 구성합니다.
✓ ul#root 엘리먼트 안에 카테고리(음료, 음식, 굿즈, 카드)를 렌더링할 4개의 li 엘리먼트가 있어야 합니다.
✓ 카테고리(음료, 음식, 굿즈, 카드) 엘리먼트 안에는 각각 자식 노드를 보여주고 감춰줄 checkbox가 존재해야 합니다.
✓ 음료, 음식, 굿즈, 카드 카테고리 이름(name)을 span 태그로 감싸야 합니다.
✓ 자식 노드가 없는 데이터의 경우, li 엘리먼트 안에 단순히 이름(name)만 표시합니다. (checkbox 및 span, ul을 포함하면 안됩니다)
✓ 자식 노드가 있는 데이터의 경우, li 엘리먼트 아래에 자식 노드를 렌더링할 새로운 ul이 존재해야 합니다. (1)
✓ 자식 노드가 있는 데이터의 경우, li 엘리먼트 아래에 자식 노드를 렌더링할 새로운 ul이 존재해야 합니다. (2)
✓ type 속성이 item인 객체는 li 태그로 name 속성값을 감싸주어야 합니다.

2️⃣ 작성 코드

const root = document.getElementById('root');
function createTreeView(menu, currentNode) {
  // TODO: createTreeView 함수를 작성하세요.

  // root 엘리먼트안에 카테고리 li 만들기
  for(let i=0; i<menu.length; i++){
    let category = document.createElement('li');
    if(menu[i].children){
    // children이 있을 경우에만
      let chkBox = document.createElement('input');
      // 체크박스 만들기
      chkBox.setAttribute('type', 'checkbox');

      let name = document.createElement('span');
      // name 만들기
      name.textContent = menu[i].name;

      root.appendChild(category);
      category.appendChild(chkBox);
      category.appendChild(name);
      // 각 요소 root에 자식으로 추가해주기

      let innerUl = document.createElement('ul');
      // ul 안에 들어갈 ul 만들기(재귀 함수에 매개변수로 줄 값)
      category.appendChild(innerUl);

      currentNode.appendChild(category);
      // 현재 노드에 현재 작업하고 있는 노드 추가
      // 재귀로 호출될 수록 늘어난다.

      createTreeView(menu[i].children, innerUl);
      // 밑에 자식이 있으면 재귀로 함수 불러서 그 자식들도 똑같이 렌더링 해주기
    }
    else{     
    // 자식이 없는 경우
      root.appendChild(category);
      category.textContent = menu[i].name;
      currentNode.appendChild(category);
    }

  }
}

createTreeView(menu, root);

3️⃣ 시연 화면