📏 JavaScript로 강제되는 레이아웃 계산: 성능 저하와 유지보수의 늪

Why Wrong?

How to Fix?

// HTML: <div id="myElement" style="position: absolute;"></div>

const myElement = document.getElementById('myElement');

function updatePositionAndSize() {
  // 뷰포트 너비의 10%만큼 왼쪽으로 이동 (잦은 Reflow 발생)
  const newLeft = window.innerWidth * 0.1;
  myElement.style.left = `${newLeft}px`;

  // 뷰포트 높이의 20%만큼 위에서 아래로 이동 (잦은 Reflow 발생)
  const newTop = window.innerHeight * 0.2;
  myElement.style.top = `${newTop}px`;

  // 뷰포트 너비의 50%만큼 너비 설정 (잦은 Reflow 발생)
  const newWidth = window.innerWidth * 0.5;
  myElement.style.width = `${newWidth}px`;

  // 계산된 스타일 값 읽기 (강제 Reflow 발생)
  console.log('Current offsetWidth:', myElement.offsetWidth);
}

// 윈도우 크기 변경 시마다 위치 및 크기 재계산
window.addEventListener('resize', updatePositionAndSize);
updatePositionAndSize(); // 초기 설정

/* CSS: 레이아웃 및 반응형 스타일은 CSS로 정의 */
#myElement {
  width: 50vw; /* 뷰포트 너비의 50% */
  height: 20vh; /* 뷰포트 높이의 20% */
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  /* transform은 레이아웃에 영향을 주지 않고 GPU 가속이 가능하여 성능 우수 */
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease-out, background-color 0.3s ease-out;
}

/* JavaScript로 토글될 상태 클래스 */
#myElement.active {
  transform: translate(0%, -50%); /* 왼쪽으로 50% 이동 */
  background-color: coral;
}

/* JavaScript: 상태 변화에 따른 클래스 제어 */
// HTML: <button id="toggleButton">위치 및 색상 변경</button>
const myElement = document.getElementById('myElement');
const toggleButton = document.getElementById('toggleButton');

toggleButton.addEventListener('click', () => {
  myElement.classList.toggle('active');
});

You Might Also Like