DOM 다루기 : todolist layout 반복되는 코드 리팩토링

다 까먹어버린 자바스크립트를 다시 복기시키기 위해 시작한 투두 리스트 만들기!

만들다 보니 자바스크립트 처음 배울 때 써내려갔던 코드와 별반 차이가 없다..

 

처음이랑 똑같이 작성하면 단순 복습 단순 노가다일뿐..!!!!

뭐라도 발전된게 있어야 하지 않을까.......???????????란 생각에

 

반복되는 코드를 줄여보기로 했다!

---

👻 이전 코드

전에는 냅다 필요한 요소들 끊임없이 생성 후

      const wrapper = document.createElement("div");

      const header = document.createElement("header");

      const inputContainer = document.createElement("div");

      const todoContainer = document.createElement("div");

 

냅다 붙여버리기..

      document.body.appendChild(wrapper);

      wrapper.appendChild(header);

      wrapper.appendChild(inputContainer);

      wrapper.appendChild(todoContainer);

 

부모요소 생성, 자식요소 생성, 자식요소 부모요소에 붙이기..

자꾸 늘어만 가는 createElement, appendChild......지긋지긋햐..

---

✨ 리팩토링

function createElement({
  tagName,
  properties,
  parent,
  children,
  count = 1,
}) {
  function create() {
    const element = document.createElement(tagName);  // 태그 생성
    Object.assign(element, properties);               // 속성 할당
    parent?.appendChild(element);                     // 부모에 추가

    // 자식 요소가 있을 경우 재귀적으로 자식 생성
    children?.map((child) => {
      child.parent = element;   // 현재 생성된 요소를 부모로 설정
      createElement(child);     // 자식 요소를 위한 createElement 재귀 호출
    });

    return element;
  }

  if (count > 1) {
    const results = [];
    for (let i = 0; i < count; i++) {
      results.push(create());
    }
    return results;
  } else {
    return create();
  }
}

• createElement와 appendChild를 재사용 가능한 createElement 함수로 변경하여 반복되는 코드를 제거하였다.
• createElement 함수는 여러 요소를 한 번에 생성할 수 있도록 count 파라미터를 추가하였다. 이를 통해 여러 요소를 동적으로 쉽게 추가할 수 있게 되었다.
• 부모-자식 관계의 DOM 구조를 쉽게 만들기 위해 children 파라미터와 재귀 호출을 사용했다. 이로써 부모 요소가 자식 요소를 갖는 복잡한 DOM 트리도 간단하게 구성할 수 있다.
• Object.assign을 사용하여 요소에 속성들을 유연하게 할당할 수 있도록 하였다. 이를 통해 여러 속성을 한 번에 설정할 수 있고, 추가적인 속성이 생기더라도 함수 수정 없이 처리할 수 있다.

Object.assign()은 객체의 속성들을 다른 객체에 복사하는 역할을 한다.
여기서는 properties 객체의 속성들을 생성된 태그(element)에 복사하여, 태그의 속성을 설정한다.

 

 

✨ 리팩토링한 createElement 사용하기

children 요소가 끊임 없이 생겨 무한 들여쓰기가 발생..

가독성을 위해 header, inputContainer, itemContainer의 큰 덩어리로 나누어서 생성해주었다.

      const app = createElement({
        tagName: "div",
        properties: { id: "app" },
        parent: document.body,
      });

      const header = createElement({
        tagName: "header",
        properties: { id: "header" },
        parent: app,
        children: [
          {
            tagName: "div",
            properties: { className: "counter" },
            children: [
              {
                tagName: "span",
                properties: { textContent: "total" },
              },
              {
                tagName: "span",
                properties: { textContent: "0" },
              },
              {
                tagName: "span",
                properties: { textContent: "completed" },
              },
              {
                tagName: "span",
                properties: { textContent: "0" },
              },
            ],
          },
          {
            tagName: "h1",
            properties: { textContent: "T🌞 D🎯 LIST", className: "title" },
          },

          {
            tagName: "span",
            properties: { textContent: "할 일을 기록하세요🌱" },
          },
        ],
      });
      
      // 이후 생략..

 

---

참고🧐

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Object.assign() - JavaScript | MDN