코드스테이츠 6주차 / Tree UI

createTreeView 함수를 재귀(자기 자신을 계속 부르게 함)호출하여
최종 결과가 위와 같은 모습으로 나와야 했다

테스트 케이스는 이렇게 존재한다

index.html에 가보면 15번째줄에 <ul id="root"></ul>가 있는 것을 볼 수 있다
이 안에 자식 엘리먼트를 넣어주면 된다

22번째줄 연결되어 있는 js 파일로 들어가서 수정을 해주면 되는데
root id속성을 가진 엘리먼트가 root 변수에 할당되어 전달인자로 들어가고 있다
함수안의 내용을 채워보자

children이 있을 때와 없을 때를 비교해서 작성해주면 된다

자식이 있을 때는 체크박스타입의 input, 이름이 들어갈 span , 다시 자식엘리먼트가 들어갈 수 있게
ul 태그를 추가해 li 엘리먼트의 자식으로 append 해주면 된다

자식이 없을 때는 이름만 추가해주면 된다

index.test.js


const menu = [
 {
   type: 'group',
   name: '음료',
   children: [
     {
       type: 'group',
       name: '콜드 브루',
       children: [
         { type: 'item', name: '나이트로 콜드 브루' },
         { type: 'item', name: '돌체 콜드 브루' },
         { type: 'item', name: '제주 비자림 콜드 브루' },
         { type: 'item', name: '콜드 브루' },
       ],
     },
     {
       type: 'group',
       name: '프라푸치노',
       children: [
         { type: 'item', name: '애플 쿠키 크림 프라푸치노' },
         { type: 'item', name: '더블 에스프레소 칩 프라푸치노' },
         { type: 'item', name: '모카 프라푸치노' },
         { type: 'item', name: '피스타치오 크림 프라푸치노' },
       ],
     },
     {
       type: 'group',
       name: '블렌디드',
       children: [
         { type: 'item', name: '망고 바나나 블렌디드' },
         { type: 'item', name: '딸기 요거트 블렌디드' },
         { type: 'item', name: '자몽 셔벗 블렌디드' },
         { type: 'item', name: '피치 & 레몬 블렌디드' },
       ],
     },
     {
       type: 'group',
       name: '티',
       children: [
         { type: 'item', name: '라임 패션 티' },
         { type: 'item', name: '민트 블렌드 티' },
         { type: 'item', name: '아이스 유스베리 티' },
         { type: 'item', name: '아이스 캐모마일 블렌드 티' },
       ],
     },
     {
       type: 'group',
       name: '주스',
       children: [
         { type: 'item', name: '한방에 쭉 감당' },
         { type: 'item', name: '파이팅 청귤' },
         { type: 'item', name: '딸기주스' },
         { type: 'item', name: '도와주 흑흑' },
       ],
     },
   ],
 },
 {
   type: 'group',
   name: '음식',
   children: [
     {
       type: 'group',
       name: '빵',
       children: [
         { type: 'item', name: '트러플 미니 스콘' },
         { type: 'item', name: '보늬밤 몽블랑 데니쉬' },
         { type: 'item', name: '고소한 치즈 베이글' },
         { type: 'item', name: '미니 클래식 스콘' },
       ],
     },
     {
       type: 'group',
       name: '케이크',
       children: [
         { type: 'item', name: '밀당 에그 타르트' },
         { type: 'item', name: '마스카포네 티라미수 케이크' },
         { type: 'item', name: '블루베리 쿠키 치즈 케이크' },
         { type: 'item', name: '부드러운 생크림 카스텔라' },
       ],
     },
     {
       type: 'group',
       name: '샌드위치',
       children: [
         { type: 'item', name: '애플 까망베르 샌드위치' },
         { type: 'item', name: '트리플 머쉬룸 치즈 샌드위치' },
         { type: 'item', name: '로스트 치킨 샐러드 밀 박스' },
         { type: 'item', name: 'B.E.L.T 샌드위치' },
       ],
     },
     {
       type: 'group',
       name: '과일',
       children: [
         { type: 'item', name: '하루 한 컵 RED' },
         { type: 'item', name: '한라봉 가득 핸디 젤리' },
       ],
     },
     {
       type: 'group',
       name: '스낵',
       children: [
         { type: 'item', name: '리저브 초콜릿 세트' },
         { type: 'item', name: '로스티드 아몬드 앤 초콜릿' },
         { type: 'item', name: '마카롱' },
         { type: 'item', name: '자일리톨 캔디 크리스탈 민트' },
       ],
     },
     {
       type: 'group',
       name: '아이스크림',
       children: [
         { type: 'item', name: '자바 칩 유기농 바닐라 아이스크림' },
         { type: 'item', name: '넛츠 초콜릿 아포가토' },
         { type: 'item', name: '바닐라 아포가토' },
       ],
     },
   ],
 },
 {
   type: 'group',
   name: '굿즈',
   children: [
     {
       type: 'group',
       name: '머그',
       children: [
         { type: 'item', name: '우리 한글 블랙 머그 473ml' },
         { type: 'item', name: '서울 투어 머그 355ml' },
         { type: 'item', name: '스타벅스 1호점 머그 400ml' },
         { type: 'item', name: '서울 제주 데이머그 세트' },
       ],
     },
     {
       type: 'group',
       name: '텀블러',
       children: [
         { type: 'item', name: 'SS 부산 투어 텀블러 355ml' },
         { type: 'item', name: 'SS 블랙 헤리티지 오드리 텀블러 355ml' },
         { type: 'item', name: 'SS 에치드 실버 텀블러 473ml' },
       ],
     },
     {
       type: 'group',
       name: '악세사리',
       children: [
         { type: 'item', name: '리저브 오렌지 카드 홀더' },
         { type: 'item', name: '스타벅스 1호점 에코백' },
         { type: 'item', name: '스타벅스 1호점 랩탑 파우치' },
       ],
     },
   ],
 },
 {
   type: 'group',
   name: '카드',
   children: [
     { type: 'item', name: '10000원권' },
     { type: 'item', name: '30000원권' },
     { type: 'item', name: '50000원권' },
     { type: 'item', name: '100000원권' },
   ],
 },
];

// 데이터가 어떻게 구성되어 있는지 잘 살펴봐야 한다



const root = document.getElementById('root');

function createTreeView(menu, currentNode) {
 for (let i = 0; i < menu.length; i++) {
   const li = document.createElement('li');
   // 자식이 있을 때
   if (menu[i].children) {
     // 체크박스가 존재해야 합니다 
     const input = document.createElement('input');
     input.type = 'checkbox';
     //카테고리 이름을 span태그로 감싸야 합니다 
     const span = document.createElement('span');
     span.textContent = menu[i].name;
     //자식 노드가 있는 데이터일경우 ,
     //자식 노드를 렌더링할 새로운 ul이 존재해야 합니다 
     const ul = document.createElement('ul');
     // 만들어 줬던 것들을 li에 넣어준뒤 
     li.append(input, span, ul);
     // root에 넣어준다
     currentNode.append(li);

     createTreeView(menu[i].children, ul); 
     // 재귀함수를 이용해서 자식노드를 만들어 줘야 한다!!
     // 두번째로 돌아갈때 각 요소의 childern 으로 들어가야 하고 
     // 현재 노드는 ul 이기 때문에 매개변수로 적어주면 된다 
   } else {
     // 자식노드가 없을때는 이름만 표시한다 
     li.textContent = menu[i].name;
     currentNode.append(li);
   }
 }
}

createTreeView(menu, root);

다른 방법으로 풀 수도 있다
type이 그룹이면 자식이 계속 나오고 type이 item이면 그대로 끝나는 걸 볼 수 있다
그걸 활용해서 if안의 조건을 그룹일때와 아닐때로 구별해서 풀어도 된다

for(let el of menu){
  if(el.type === 'group'){
    const li = document.createElement('li');
    currentNode.append(li);

    const input = document.createElement('input');
    input.type = 'checkbox'
    
    const span = document.createElement('span');
    span.textContent = el.name;
    
    const ul = document.createElement('ul');
  
    li.append(input, span, ul);
	
    createTreeView(el.children, ul);
  }else{
    li.textContent = el.name;
    currentNode.append(li);
  }
}