[바닐라 JavaScript] 화면 전환과 리렌더링 (에러핸들링)

바닐라 자비스크립트와 웹팩을 사용하여 SPA를 구현했습니다.

(제작 과정에서 참고했던 링크는 콘텐츠 하단에 있습니다.)

 

React에서는 State 변경 시 자동으로 재조정(Reconciliation)이 일어납니다.

그러나 바닐라 자바스크립트에서는 재랜더링 관련 코드를 직접 작성해야 합니다.

 

 

화면 전환 시 리렌더링

문제상황

화면 전환 시 새로운 페이지가 기존 페이지를 대체해야 합니다.

그러나 기존 페이지와 새로운 페이지가 합쳐져 버렸습니다.

원인

참고했던 자료에는 innerHTML 메소드를 사용해서 리랜더링을 진행했습니다.

해당 메소드를 사용하면 기존에 내용은 삭제되고 새로운 내용이 대체됩니다.

 

저는 DOM 객체를 만들어 append 메소드를 사용했습니다.

이 메소드는 기존 Node는 그대로 둔 채 새로운 Node를 트리에 붙여버립니다.

따라서 콘텐츠가 아래로 계속 쌓이게 됩니다.

해결방안

remove 메소드로 기존 Node를 삭제하는 코드를 추가하여,

새로운 콘텐츠가 기존 콘텐츠를 대체하도록 만들었습니다.

 

// element는 기존 HTML 엘리먼트이며, new는 새로운 HTML 엘리먼트 또는 DOM 객체입니다.


// 참고용 코드
const renderHTML = (element, new) => {
  element.innerHTML = new;
};


// 에러 코드
const renderHTML = (element, new) => {
  element.appendChild(new);
};

// 해결 코드
const renderHTML = async (element, new) => {
  if (document.querySelector('main')) document.querySelector('main').remove();
  element.appendChild(new);
};

 

 

클릭이벤트 발생 시 리렌더링

리액트에서는 click 이벤트 발생 시 state가 변경되어 재조정이 일어날 수 있습니다.

그러나 Vanilla JS를 사용하면 Node를 삭제하고 새로운 노드를 추가하는 코드를 직접 작성해야합니다.

 

  // 버튼생성
  const button = document.createElement('button')
  button.textContent = '조회'
  
  // 클릭이벤트 할당
  button.addEventListener('click', function (event) {   
    event.preventDefault()
    startDate = inputStartDate.value
    endDate = inputEndDate.value
    
    // 재렌더링 시 기존 canvas 삭제
    if(document.getElementById(`${canvasChartId}`)) document.getElementById(`${canvasChartId}`).remove()
    
    // 재생성
    const canvas = document.createElement('canvas')
    canvas.setAttribute('id', `${canvasChartId}`)
    divChart.append(canvas)
    chartModule(canvas, startDate, endDate)  
  })
  form.append(inputStartDate, inputEndDate, button)

  // chart canvas를 감싸기 위한 div 제작
  const divChart = document.createElement('div')
  divChart.setAttribute('id', `${divChartId}`)
  divChart.classList.add('chartBox')
  // divChart.setAttribute('style', 'position: relative; height:200px; width:40vw')

  // canvas 제작
  const canvas = document.createElement('canvas')
  canvas.setAttribute('id', `${canvasChartId}`)
  divChart.append(canvas)
  chartModule(canvas, startDate, endDate)

 

 

 

 

 

 

프로젝트 Github 링크 이동하기

참고링크 이동하기

참고링크2 이동하기