자바스크립트 돔 DOM 조작 연습

📌  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원권' },

],

},

];

 

 

📌  JS 코드

 

const root = document.getElementById('root');
function createTreeView(menu, currentNode) {
  menu.map((el) => {
    let li = document.createElement('li');
    if(el.children !== undefined){
      let input = document.createElement('input');
      let ul = document.createElement('ul');
      let span = document.createElement('span');
      input.setAttribute('type', 'checkbox');
      span.textContent = el.name;

      li.append(input);
      li.append(span);
      currentNode.append(li);

      li.append(ul);
      createTreeView(el.children, ul);
    }else{
      currentNode.append(li);
      li.textContent = el.name;
    }
  });      
}

createTreeView(menu, root);

 

 

📌  JS 코드 뜯어보기

 

const root = document.getElementById('root');
function createTreeView(menu, currentNode) {
  // 객체들을 담은 menu 배열을 돌면서 요소(객체) 검사
  menu.map((el) => {
  
    // 객체 개수만큼 li태크 생성
    let li = document.createElement('li');         // <li></li>
    
    // 객체 안에 children키값이 있으면
    if(el.children !== undefined){
      let input = document.createElement('input'); // <input>
      let ul = document.createElement('ul');       // <ul></ul>
      let span = document.createElement('span');   // <span></span>
      input.setAttribute('type', 'checkbox');      // <input type="checkbox">
      span.textContent = el.name;                  // <span>${el.name}</span>

      li.append(input);                   // <li>
                                          //   <input type="checkbox">
                                          // </li>
                                             
      li.append(span);                    // <li>
                                          //   <input type="checkbox">
                                          //   <span>${el.name}</span>
                                          // </li>
                                             
      currentNode.append(li);             // <div id="root>
                                          //   <li>
                                          //     <input type="checkbox">
                                          //     <span>${el.name}</span>
                                          //   </li>
                                          // </div>

	  // li태그에 ul태그 추가
      li.append(ul);                      // <div id="root>
                                          //   <li>
                                          //     <input type="checkbox">
                                          //     <span>${el.name}</span>
                                          //     <ul></ul>
                                          //   </li>
                                          // </div>

      // 재귀함수 호출
      createTreeView(el.children, ul);    // <div id="root>
                                          //   <li>
                                          //     <input type="checkbox">
                                          //     <span>${el.name}</span>
                                          //     <ul>
                                          //       <li>
                                          //         <input type="checkbox">
                                          //         <span>${el.children.name}</span>
                                          //       	 <ul></ul>
                                          //       </li>
                                          //     </ul>
                                          //   </li>
                                          // </div>
      			
    // 객체 안에 children키값이 없으면
    }else{
      currentNode.append(li);             // <div id="root>
                                          //   <li>
                                          //     <input type="checkbox">
                                          //     <span>${el.name}</span>
                                          //     <ul>
                                          //       <li>
                                          //         <input type="checkbox">
                                          //         <span>${el.children.name}</span>
                                          //         <ul>
                                          //           <li></li>
                                          //         </ul>
                                          //       </li>
                                          //     </ul>
                                          //   </li>
                                          // </div>
                                          
      li.textContent = el.name;           // <div id="root>
                                          //   <li>
                                          //     <input type="checkbox">
                                          //     <span>${el.name}</span>
                                          //     <ul>
                                          //       <li>
                                          //         <input type="checkbox">
                                          //         <span>${el.children.name}</span>
                                          //         <ul>
                                          //           <li>
                                          //             ${el.name}
                                          //           </li>
                                          //         </ul>
                                          //       </li>
                                          //     </ul>
                                          //   </li>
                                          // </div>  
    }
  });      
}

createTreeView(menu, root);

 

 

📌  생성된 HTML 구조

 

 

 

📌  렌더링 결과

 

 

 

📌  재귀함수를 이용해 DOM 객체를 생성하면서 알게된 점

 

💚  태그를 한번만 생성해도되는 편리함이 있었다. 

 

💚  생성된 태그를 담은 변수는 한 곳에 모아두는 게 보기 편하더라.

 

💚  함수를 어디서든 호출할 수 있다는 걸 염두에 두고 로직을 꼼꼼히 구현해 함수를 완성해야 한다.

 

💚  생성한 태그는 꼭 !! 원하는태그에 append해줘야 해당 태그의 자식속성으로 추가가 된다. ( 잊지말자는 의미에서 )

 

✔  태그를 생성하기 ( document.createElement() )

✔  태그의 속성값 추가하기 ( .setAttribute() )

✔  태그에 내용 추가하기 ( .textContent=? )

✔  완성된 태그를 DOM에 추가하기 ( .append() )