0시마다 이미지 및 데이터가 변경되는 최저가 사이트에서 이미지 및 데이터 렌더링 최적화를 통해 성능을 개선하는 방안

[whdmldus1116]

부제: 리엑트 버츄얼 돔과 라우터 동작방식에 대해서

랜더링 최적화를 확인하기 위한 기본설정

1. Vite의 청크 분리 설정
   Vite는 내부적으로 Rollup을 사용하여 번들을 관리하므로, Rollup의 청크 분리 설정을 Vite에서 적용할 수 있습니다. 이를 위해 vite.config.js에 build 설정을 추가할 수 있습니다. 하지만 이 설정은 주로 프로덕션 빌드에서만 적용됩니다.

Vite 설정 파일에 청크 분리를 위한 옵션을 추가할 수 있습니다. 청크 분리를 적용하여 프로덕션 빌드 시 모듈들을 별도의 청크로 분리합니다.
vite.config.js

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        },
      },
    },
  },
};

2. 개발 환경에서 프로덕션 빌드 시뮬레이션
   개발 환경에서도 프로덕션 빌드를 일부 시뮬레이션하려면, Vite의 프로덕션 빌드를 로컬에서 실행한 다음 결과를 로컬 서버로 확인하는 방법이 있습니다. 이는 yarn dev와 동일한 개발 환경을 제공하지는 않지만, 프로덕션 빌드를 실행한 후 결과를 확인할 수 있습니다.

3. 프로덕션 빌드 실행
   yarn build

4. 유휴 상태로컬 서버에서 빌드된 파일 확인 (예: serve 사용)
   npx serve dist
   메인페이지 새로고침

상세정보페이지에서 뒤로가기를 눌러 메인페이지로 이동한경우

lazy loading 미사용시 메인페이지 리로딩

개발자 도구의 Profiler사용

1. React Virtual DOM과 Profiler의 관계
   React의 Virtual DOM은 실제 DOM과의 차이점을 계산하고, 변화가 필요한 부분만 업데이트하는 방식으로 성능을 최적화합니다.
   Profiler는 이 Virtual DOM이 어떻게 작동하고 있는지, 그리고 실제 DOM에 반영되기 전 Virtual DOM에서 렌더링이 어떻게 이루어지는지를 보여줍니다.

Virtual DOM 작동 방식:
React 렌더링: React는 상태(state)나 props가 변경될 때마다 Virtual DOM을 다시 계산합니다. 이 과정에서 새로운 Virtual DOM 트리를 생성하고, 이전 트리와 비교하는 "diffing" 과정을 거칩니다.
DOM 업데이트: Virtual DOM에서 차이점이 발견된 부분만 실제 DOM에 반영됩니다.
Profiler에서의 연결:
Profiler에서 렌더링 시간이 길거나, 컴포넌트가 자주 리렌더링되는 경우, 이는 Virtual DOM에서 차이점이 감지되어 리렌더링이 발생했음을 의미합니다.
Flame Graph 또는 Ranked View에서 리렌더링이 빈번한 컴포넌트는, Virtual DOM 비교 과정에서 변경된 것으로 감지된 컴포넌트입니다.
이러한 정보는 불필요한 리렌더링을 찾아내고 최적화할 수 있는 기회를 제공합니다.
최적화 관련:
React.memo를 사용하면 불필요한 리렌더링을 줄일 수 있습니다. 이는 Virtual DOM의 diffing 과정에서 props나 상태가 변경되지 않은 경우, 해당 컴포넌트의 재렌더링을 방지할 수 있습니다.
useMemo, useCallback 같은 Hook을 사용하면 Virtual DOM에서 함수나 객체가 재생성되는 것을 방지할 수 있습니다.
2. React Router와 Profiler의 관계
React Router는 라우트가 변경될 때 컴포넌트를 동적으로 교체하며, 이 과정에서 새로운 페이지나 컴포넌트가 렌더링됩니다. React Router와 Profiler의 관계는 다음과 같습니다:

React Router 작동 방식:
React Router는 URL 경로를 기반으로, 해당 경로에 매칭되는 컴포넌트를 렌더링합니다.
페이지 전환 시, 새로운 경로에 맞는 컴포넌트가 새롭게 렌더링되며, 이는 Virtual DOM에 반영됩니다.
Profiler에서의 연결:
페이지 전환이 발생하면, React Router는 경로에 맞는 컴포넌트를 다시 렌더링하게 됩니다. 이때 Profiler에서 해당 경로와 관련된 컴포넌트들이 새롭게 렌더링되는 것을 관찰할 수 있습니다.
Flame Graph에서 페이지 전환 시 어떤 컴포넌트가 새로 렌더링되었는지, 그 렌더링에 걸린 시간을 확인할 수 있습니다.
Ranked View에서는 페이지 전환 시 렌더링에 가장 많은 시간이 소요된 컴포넌트를 확인할 수 있습니다.
최적화 관련:
React Router의 페이지 전환은 Virtual DOM을 사용하여 효율적으로 이루어지지만, 여전히 필요한 경우 코드 분할을 통해 최적화할 수 있습니다.
React.lazy와 Suspense를 사용하여 페이지별로 코드 스플리팅을 적용하면, 필요할 때만 컴포넌트를 로드하여 초기 렌더링 성능을 개선할 수 있습니다.
Profiler를 통해, 특정 페이지 전환에서 너무 많은 컴포넌트가 한 번에 렌더링되거나, 시간이 오래 걸리는 경우를 발견하면 이를 코드 분할로 최적화할 수 있습니다.
3. Virtual DOM과 React Router 성능 최적화의 관련성
Virtual DOM과 React Router의 동작 방식이 서로 연결되어 있기 때문에, 페이지 전환 시 어떤 컴포넌트가 리렌더링되는지, 그리고 그 렌더링이 얼마나 최적화되었는지를 확인하는 것이 중요합니다.

페이지 전환 시 불필요한 컴포넌트 렌더링이 발생하는지 확인하는 것이 성능 최적화의 핵심입니다.
Profiler의 "Why did this render?" 기능을 사용하여 페이지 전환 시 불필요하게 렌더링되는 컴포넌트를 찾아낼 수 있습니다.
Virtual DOM과 Router가 상호작용하는 방식에서 병목이 발생하는지 확인하고, 이를 해결하기 위해 코드 스플리팅, 메모이제이션, 또는 React.memo를 적용할 수 있습니다.
요약:
React Profiler는 Virtual DOM에서의 렌더링 효율성을 평가하는 도구이며, 이는 React Router가 동적으로 페이지를 전환할 때 컴포넌트가 어떻게 렌더링되는지와 관련이 있습니다.
Virtual DOM은 상태와 props의 변경을 감지하여 변경된 부분만 업데이트하는데, Profiler는 이러한 업데이트 과정에서 성능 문제가 발생하는지를 파악할 수 있습니다.
React Router는 경로 변경 시 새로운 컴포넌트를 렌더링하게 되며, 이 과정에서 Profiler를 사용해 페이지 전환 성능을 평가하고 최적화할 수 있습니다.
Profiler는 React의 Virtual DOM과 Router가 어떻게 상호작용하는지 분석하고, 렌더링 성능을 최적화하는 데 중요한 역할을 합니다.

styled-components가 성능 저하에 영향을 줄 수 있는 원인 중첩된 선택자: 브라우저가 선택자와 일치하는 요소를 찾기 위해 더 많은 작업을 하게 되므로 지나치게 복잡하거나 깊게 중첩된 CSS 선택자는 스타일의 렌더링 속도를 늦출 수 있다. 동적 스타일 : React에서 컴포넌트는 props가 변경될 때마다 재렌더링된다. styled-components에 새로운 객체, 배열 또는 함수를 매번 props로 전달한다면 불필요한 재렌더링과 스타일 재계산을 유발할 수 있다. 동적 스타일링은 꼭 필요한 부분에만 사용했지만, 중첩된 선택자를 꽤 많이 사용했었다. 더 세세하게 분할하고 불필요한 코드를 제거했다.

1. React.memo로 Router를 감싸서 props가 변경되지 않으면 리렌더링되지 않도록 하였습니다.

// 동적 import()를 사용한 페이지 컴포넌트 로드
const CategoryPage = React.lazy(() => import('./pages/category'));
const DetailPage = React.lazy(() => import('./pages/detail'));

// ... 나머지 동적 로드 컴포넌트 생략

const Router = memo(() => {
  return (
    <SearchProvider>
      <HeaderHeightProvider>
        <BrowserRouter>
          <ScrollToTop />
          <Suspense fallback={<LoadingSpinner />}>
            <Routes>
              <Route path="/" element={<OutLetContainer />}>
                <Route path="/" element={<MainPage />} />
                <Route path="/category" element={<CategoryPage />} />
                <Route path="/product/:productName" element={<DetailPage />} />
                {/* 추가적인 라우트들 */}
              </Route>
            </Routes>
          </Suspense>
        </BrowserRouter>
      </HeaderHeightProvider>
    </SearchProvider>
  );
});

export default Router;

2. banner.tsx 최적화
   배너 컴포넌트에서 주기적으로 이미지를 전환하는 로직이 있으며, 사용자 상호작용에 따라 슬라이드를 변경합니다. 여기서 최적화할 수 있는 부분은 배너가 다시 렌더링되는 경우를 줄이는 것입니다. 현재는 이미지 전환에 따라 배너 전체가 리렌더링되는데, 이를 방지하기 위해 useMemo와 React.memo를 사용할 수 있습니다.

React.memo로 불필요한 렌더링을 막았습니다.
useEffect는 이미지 전환 로직을 제어하며, setInterval을 통해 상태 변화가 발생할 때만 컴포넌트를 다시 렌더링합니다.
CarouselItem은 props를 기반으로 렌더링되므로, 상태 변화에 따라 리렌더링이 최소화됩니다.
변화전 코드

const CarouselItem = styled.div<{ $backgroundImage: string }>`
  width: 100%;
  height: 30vh;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  background-image: url(${(props) => props.$backgroundImage});
`;

변화후 코드

const CarouselItem = memo(styled.div<{ $backgroundImage: string }>`
  width: 100%;
  height: 30vh;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  background-image: url(${(props) => props.$backgroundImage});
`);

변화된 성능

변화전 성능

[startupcodekr]

0시마다 다량의 이미지가 변경되는 최저가 사이트에서 프론트엔드-백엔드 통신 및 이미지 렌더링을 최적화하여 사용자 인터페이스 성능을 개선하는 방안