๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Front-end/JS

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋” DOM ์กฐ์ž‘ ์—ฐ์Šต

by ciocio 2021. 8. 31.

๐Ÿ“Œ  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() )

 

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€