리액트에서 INP를 효과적으로 최적화하는 5가지 팁

1. DOM 크기 조정 및 최적화

리액트 기반 웹사이트의 성능을 높이기 위해서는 DOM(Document Object Model)의 크기를 적절히 관리하는 것이 필수적입니다. 요소의 수가 많거나 깊게 중첩될 경우, 렌더링 속도가 느려지고 메모리 사용량이 증가할 수 있습니다. 구글은 DOM 요소의 최대 수를 1,400개로 권장하고 있으며, 대규모 사이트의 경우 2,500개까지는 빠르게 처리할 수 있다고 합니다. DOM 크기를 줄이기 위해 불필요한 컴포넌트를 제거하거나 지연 로딩(lazy loading)을 활용하는 것이 효과적입니다.

DOM 크기 확인 방법

크롬 콘솔에서 다음 명령어를 입력하여 현재 DOM 요소의 수를 확인할 수 있습니다:

document.querySelectorAll("*").length

2. 컴포넌트 지우기 및 지연 로딩 적용

DOM에 불필요한 컴포넌트를 렌더링하지 않음으로써 성능을 향상시킬 수 있습니다. 특히 SEO에 중요하지 않거나 사용자가 즉시 보지 않는 컴포넌트는 지연 로딩을 통해 필요할 때만 로드하는 것이 좋습니다. 예를 들어, 지도나 차트와 같은 시각적 요소는 사용자가 해당 섹션에 도달할 때 로드되도록 설정할 수 있습니다.

import { lazy } from "react";

const MarkdownPreview = lazy(() => import("./MarkdownPreview.js"));

3. 컴포넌트 구조 단순화

UI 컴포넌트가 과도하게 복잡해지면 DOM 크기가 불필요하게 커질 수 있습니다. 최신 HTML 및 CSS 기능을 활용하여 레이아웃을 단순화하고, 불필요한 래퍼 요소를 줄이는 것이 중요합니다. 예를 들어, 별점 표시 시 별 아이콘 요소를 최소화하여 DOM을 간소화할 수 있습니다.

4. 가상 스크롤과 같은 기법 활용

아주 긴 목록을 렌더링할 때는 가상 스크롤(virtual scrolling)을 사용하여 렌더링된 컴포넌트의 수를 제한할 수 있습니다. 이를 통해 브라우저의 처리 부담을 줄이고 렌더링 속도를 개선할 수 있습니다.

5. 서버 사이드 렌더링(SSR) 및 서버 컴포넌트 활용

서버 사이드 렌더링(SSR)을 통해 첫 HTML 응답 시간을 최적화하고, 클라이언트 측에서의 자바스크립트 처리 부담을 줄일 수 있습니다. 또한, 리액트 서버 컴포넌트(React Server Components)를 사용하면 클라이언트에서 불필요한 자바스크립트 실행을 방지하고 DOM 구조를 더욱 간소화할 수 있습니다.

Suspense 태그를 통한 선택적 렌더링

리액트의 `<Suspense>` 태그를 활용하여 중요도에 따라 페이지와 컴포넌트를 나누고, 덜 중요한 컴포넌트는 필요할 때만 로드되도록 설정할 수 있습니다. 이를 통해 초기 로딩 속도를 개선하고 INP 지표를 향상시킬 수 있습니다.

import React, { useInView } from "react-intersection-observer";

const Offer = ({ images, title }) => {
  const { ref, inView } = useInView();

  return (
    <article className="offer" ref={ref}>
      <div className="gallery">
        {!inView ? (
          <Image data={images[0]} />
        ) : (
          <ImagesCarousel data={images} />
        )}
        <h3>{title}</h3>
      </div>
    </article>
  );
};

결론

INP 지표를 중심으로 리액트 웹의 성능을 최적화하기 위해서는 DOM 크기를 관리하고, 불필요한 컴포넌트를 제거하며, 서버 사이드 렌더링과 같은 최신 기법을 적극 활용하는 것이 중요합니다. 또한, 리액트를 깊이 이해하고 효율적으로 활용하는 것이 성능 최적화의 핵심입니다. 추가적인 학습을 통해 리액트 내부 구조를 이해하고, INP 최적화에 대한 더 많은 자료를 참고하시기 바랍니다.