같은 경로의 이동을 막자

 지금 SPA 방식으로 프로젝트를 구현 중에 있는데 같은 경로를 클릭 시 해당 컴포넌트가 리렌더링이 일어난다. 단점이 너무 많다

• 성능 저하: 페이지의 내용이 변하지 않음에도 불구하고, 렌더링 과정을 다시 수행해야 하므로 추가적인 자원을 소모함. 이는 특히 리소스가 제한적인 모바일 기기에서 더 큰 문제가 될 수 있다
• 사용자 경험 저하: 불필요한 페이지 로딩으로 인해 사용자는 같은 내용을 보기 위해 더 많은 시간을 기다려야 할 수 있다. 이는 사용자 경험을 저하시킴
• 서버 부담 증가: 클라이언트 측에서만 처리할 수 있는 렌더링을 서버에 요청함으로써, 서버에 불필요한 부담을 줄 수 있다. 정적 리소스나 API 호출이 많은 웹 애플리케이션의 경우, 이러한 요청이 누적되어 서버 성능에 부정적인 영향을 줄 수 있다.
• 네트워크 트래픽 증가: 동일한 페이지를 재요청하는 경우, 추가적인 네트워크 트래픽이 발생한다

 리렌더링시 리플로우와 리페인트가 일어난다. 그런데 리플로우는 DOM에서 추가, 삭제, 변경 등이 일어나면 리플로우가 발생하는 걸로 알고 있는데 같은 경로로 이동이 될 때도 리플로우가 발생하는지 궁금해서 확인해 본 결과 같은 경로로 이동해도 리플로우가 많이 일어나는 걸 확인했다.

 

이러한 문제를 해결하기 위해, SPA의 라우팅 관리 부분에서 동일한 경로로의 이동을 감지하고 차단하는 로직을 추가하였다. 구체적으로는, 사용자가 이동하려는 URL과 현재 URL을 비교하여, 같은 경우에는 라우팅 과정을 진행하지 않도록 처리했다. 이 간단한 조치를 통해 불필요한 리렌더링을 방지하고 앞서 언급된 문제들을 효과적으로 줄일 수 있다.

 

 요즘 워낙 모바일, 컴퓨터의 사양이 좋기 때문에 리렌더링이 의미가 있는지 없는지 잘 모르겠는데 일단 리렌더링 되면서 화면이 깜빡이는 현상은 사용자 경험에 매우 좋지 않은 상황이고, 예상치 못한 버그가 일어날 수 있기 때문에 같은 경로로 들어오는 요청을 막아야겠다고 생각을 했다.

 

우리는 route.js 에서 SPA 를 관리하고 있다. 아래 if 문에서 이동하려는 url 과 현재 url을 비교해서 간단하게 막을 수 있었다.

const navigateTo = url => {
  if (url === location.href) return;
  history.pushState(null, null, url);
  router();
};