ReportWebVitals란?

ReportWebVitals?

**reportWebVitals**는 React 프로젝트에서 웹 성능 데이터를 수집하는 함수입니다.
React 공식 템플릿 (Create React App)으로 프로젝트를 생성하면 기본적으로 포함되어 있다,

이 함수는 Web Vitals 메트릭(웹 성능 지표)을 기록하거나 분석 도구로 전송하는 데 사용됩니다.

Web Vitals 메트릭

메트릭설명

FCP	First Contentful Paint - 첫 번째 콘텐츠가 렌더링되는 시간
LCP	Largest Contentful Paint - 가장 큰 콘텐츠가 렌더링되는 시간
CLS	Cumulative Layout Shift - 레이아웃 불안정성
FID	First Input Delay - 첫 사용자 입력에 대한 응답 시간
TTFB	Time to First Byte - 첫 바이트가 수신되는 시간

사용 방법

src/reportWebVitals.js

const reportWebVitals = (onPerfEntry) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};
export default reportWebVitals;

프로젝트에 연결하기

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    {" "}
    <App />{" "}
  </React.StrictMode>
); // 콘솔에 성능 데이터를 출력 reportWebVitals(console.log);

분석 도구로 데이터 전송

예를 들어, Google Analytics에 성능 데이터를 전송할 수 있습니다.

import reportWebVitals from "./reportWebVitals";
reportWebVitals((metric) => {
  const body = JSON.stringify(metric);
  navigator.sendBeacon("/analytics", body);
});