createDocumentFragment()를 통한 요소 생성

기존 코드

https://choi95.tistory.com/65

stopwatch

이전 stopwatch를 구현할 때 기록한 LapTime을 화면 상에 랜더링하기 위해서 다음과 같이 코드로 구현하였다.

$laps.style.display = 'grid';

        let newLap = document.createElement("div");
        newLap.setAttribute("class", "laps");
        newLap.style.display = 'grid';

        let newLapNum = document.createElement("div");
        newLapNum.setAttribute("class", "lap-title");
        newLapNum.innerHTML = `${laps.length}`

        let time = document.createElement("div");
        time.setAttribute("class", "lap-title");
        time.innerHTML = `${laps[indexLaps]}`;

        newLap.appendChild(newLapNum);
        newLap.appendChild(time);

        document.querySelector('.stopwatch').appendChild(newLap);

 

createElement()와 setAttribute()를 통해 JS 내에서 동적으로 laps 태그를 생성하였다.

위와 같이 laps 태그를 만들게 되면 스톱워치에서 Reset 버튼을 클릭하였을 때 해당 laps 클래스명으로 된 태그들을 모두 삭제해줘야 한다.

// Reset Event
let lapsAll = document.querySelectorAll('.stopwatch > .laps');
          lapsAll.forEach((lap, i) => {
            if(i === 0) {
              lap.style.display = 'none';
            }
            else {
              lap.remove();
            }
          });

하지만 이렇게 되면 Reset Event 내에서 모든 laps로 된 클래스 태그들을 배열 상에서 순회 및 참조해야 되는 종속성이 발생한다.

(본래라면 lapTime과 관련 된 헬퍼 함수 내에서 관련 연산을 수행해줘야 하는게 효율적인 컴포넌트 측면에서 좋을 것이다)

<이는 처음에 나오는 카테고리 역할의 lap-title 태그_Reset이 되어도 DOM 상에서 사라지면 안되고 display 속성 값만 none으로 바꾸어 화면 상에 보이지 않게 랜더링해야 함 와 이후에 사용자가 lap버튼을 클릭하였을 때 나오는 lapTime 기록 간에 별도의 처리가 필요> 

 

createDocumentFragment()를 통한 Refactoring

해당 문제를 해결하기 위해 createDocumentFragment()를 사용한다.

DocumentFragments 는 DOM 노드들 입니다. 이것들은 메인 DOM 트리의 일부가 되지 않습니다. 일반적인 유즈 케이스는 다큐먼트 조각을 생성하고, 엘리먼트들을 다큐먼트 조각에 추가하고 그 다큐먼트 조각을 DOM 트리에 추가하는 것입니다. DOM 트리 내에서 다큐먼트 조각은 그것의 모든 자식들로 대체됩니다.

 

const createLapElement = (newLap, index) => {
        const $fragment = document.createDocumentFragment();

        const $index = document.createElement('div');
        $index.textContent = index;
        $fragment.appendChild($index);

        const $newLab = document.createElement('div');
        $newLab.textContent = formatElapsedTime(newLap);
        $fragment.appendChild($newLab);

        $laps.appendChild($fragment);

        $laps.style.display = 'grid';
      };

DocumentFragment()를 통해 lapTime을 기록하는 두 div 태그를 Wrapper로서 감싸주고 해당 Wrapper를 laps 태그에 appendChild를 이용하여 DOM 자식 요소로 추가해 주었다.

 

그리고 다음과 같이 laps 클래스로 된 클래스를 직접 삭제하는 것이 아니라 해당 laps 태그에 자식 요소들 중 CSS 가상 선택자 not을

이용하여 .lap-title 클래스를 제외 한 모든 태그들(다큐먼트 조각_두 개의 div 태그로 구성)을 삭제하게 하였다.

/ 랩 타임을 초기화(DOM에서 모두 제거)한다.
      const removeAllLapElement = () => {
        document.querySelectorAll('.laps > div:not(.lap-title)').forEach($lap => $lap.remove());
        $laps.style.display = 'none';
      };