[과제] Tree UI

Bare Minimum Requirements

- fix_me.js에서 createTreeView  함수를 직접 구현하기

완성 예시

---

fix_me.js

(생략)
...
// TODO: createTreeView 함수를 재귀(자기 자신을 계속 부르게 함)호출하여 테스트케이스를 통과하세요.
//! GOAL: 최종 결과가 resut.html와 같은 모습으로 나와야 합니다.
const root = document.getElementById('root');


// TODO: 
function createTreeView(menu, currentNode) {
  // base case
  // : 객체의 key값으로 children이 없는 경우 checkbox, span, ul 없이 li 생성 후  name 값만 넣기
  // --> 첫 번째 상위 노드가 root 밖에 없는 카테고리를 시작 할 때 
  // --> Object.keys(menu) //output --> ['0','1','2','3']
  if(!('children' in menu[0])){
    for(let i of menu){
      const li = document.createElement('li');
      li.textContent = i.name;
      currentNode.append(li);
    }
  }

  // recursive case 
  // : 객체의 key  값으로 children이 있는 경우
  /*<li>
    <input type="checkbox" checked>
    <span>음료</span>
    <ul>
      <li></li>
      <li></li>
      ...
    </ul>
   </li> 
  */
  else if('children' in menu[0]){
    for(let i of menu){
      const li = document.createElement('li');
      const input = document.createElement('input');
      const span = document.createElement('span');
      const ul = document.createElement('ul');
      input.setAttribute('type','checkbox');
      span.textContent=i.name
      currentNode.append(li)
      li.append(input,span,ul)

      createTreeView(i.children,ul) //ul의 각 li들 모두 순회
    }
  }
}


createTreeView(menu, root);
// 메뉴라는 객체와  최상위 노드인 root를 인자로 받음
// 체크 박스를 클릭하면 클릭된 노드의 자식 노드들을 보여줘야함
// 자식 노드(li)들의 구성 : <input type="checkbox">안에 <span>name</span><ul>...</ul>

- base case : 최상위 노드가 root 밖에 없는 카테고리를 시작 할 때 와 더이상 자식 노드가 없을 때

→ menu 배열을 쿼카에 가져와서 콘솔에서 경우에서 찍어본 것이 이해하는데 많은 도움이 됨 

→Object.key(menu)  //output ---> ['0','1','2','3'] 

- recursive case : 객체의 key 값으로 chlidren이 있는 경우

→ 마지막에 재귀 함수를 다시 호출할 때 인자를 넣어주는 부분이 헷갈렸음

→순회한 key의 chilren과 ul을 인자로 넣어줌 / 아래 참고 보면 이해가 쉬움

참고

---

- 세션 시간에 같이 풀어 본 코드

..(생략)..
function createTreeView(menu, currentNode){
  // for..of 구문으로 배열 순회
  // menu =[{...},{...},{...},{...}] --> 객체 4개를 가지고 있는 배열!
  for(let el of menu){
  	let li = document.create('li');
    currentNode.append(li);
    
    //전달 받은 인자 menu에 children이 있으면 
    //ex){type:'group', name:'콜드부르',chilren:[{...},...]}
    if(el.children){
      let input = document.createElement('input');
      input.setAttribute('type','checkbox');
      let span = document.createElment('span');
      span.textContent = el.name;
      let ul = createElement('ul');
      li.append(input, span, ul);
      
      createTreeView(el.children, ul)
    } else {
    //전달 받은 인자 menu에 children이 없으면
    li.textContent = el.name;
    }
  }
}

createTreeView(menu, root);

복습한 내용

- for..of 구문 : 배열에서 사용 값만 꺼내 줌 

- for..in 구문 : 객체에서 키-값 두 가지 모두 가져올 수 있음