CSS를 컴포넌트에 중복 호출하면 안되는 EU

동료의 코드 리뷰를 하면서 동일한 css 파일이 같은 페이지 내에서 여러 곳에서 호출되고 있었다. 

css 파일이기 때문에 공통의 부모 요소에만 호출하면 동일하게 호출이 될 것이라서 해당 방식이 잘못 됐다고 생각했다. 

 

근데 이런 부분 말고도

성능상에도 손해가 있을 수 있지 않을까? 

 

라는 생각이 들었다. 같은 파일을 중복으로 호출하면 페이지 내에서 동일한 CSS 파일을 여러 번 요청하기 때문에 

그만큼 낭비가 있을 것이라고 생각했다. 

 

그래서 바로 테스트를 호다닥 진행하기로 했다. 테스트 방식은 간단하다. 한 페이지에 자식 요소를 몇개 만들고 각 자식에서 동일한 css 파일을 호출하면 끝이다. 

// 부모 페이지
import React, { useEffect } from "react";
import Children1 from "../components/children1";
import Children2 from "../components/children2";
import Children3 from "../components/children3";
import Children4 from "../components/children4";

export default function Main() {
  return (
    <>
      <Children1 />
      <Children2 />
      <Children3 />
      <Children4 />
    </>
  );
}

// Children 상세 
import "../../test.css";

const Children1 = () => {
  return <div>Children1</div>;
};

export default Children1;

 

바로 해당 프로젝트를 실행시켰다. 렌더링된 홈페이지를 네트워크 탭으로 확인해봤다. 

그랬더니 하나의 css 파일만 노출이 되고 있었다.

 

왜 정상적으로 나오는지 생각해봤는데, React에서 번들링을 할 때 동일한 CSS 파일을 하나의 요소로 판단해

번들링하기 때문에 내가 예상했던 동일 CSS 반복은 일어나지 않았다.

 

최적화 번들링으로 인해서 발생하지 않은 문제라서 최적화를 시킬 수 없는 환경으로 변경해보았다.

 

Code Splitting을 하는 것이다. 필요한 시점에서 특정 CSS파일을 로드하기 때문에 동일한 CSS 파일을 호출해도 

다르게 번들링을 하지 않을까 생각이 들었다. 

import React, { useEffect } from "react";
// import Children1 from "../components/children1";
// import Children2 from "../components/children2";
// import Children3 from "../components/children3";
// import Children4 from "../components/children4";

const Children1 = React.lazy(() => import("../components/children1"));
const Children2 = React.lazy(() => import("../components/children2"));
const Children3 = React.lazy(() => import("../components/children3"));
const Children4 = React.lazy(() => import("../components/children4"));

export default function Main() {
  return (
    <>
      <Children1 />
      <Children2 />
      <Children3 />
      <Children4 />
    </>
  );
}

 

간단하게 Code Splitting을 진행하고 프로젝트를 실행하였다. 내가 원하던 결과가 네트워크 탭에 나왔다. 

각각 컴포넌트를 번들링했기 때문에 동일한 CSS파일을 여러 번 호출하고 있었다. 

 

이번 테스트 자체는 극단적으로 Code Splitting을 진행했지만 React든 Next든 상황에 따라 Code Splitting을 진행할 수 있다. 그때 예상치 못한 코드 중복이 발생하는 것보다는 중복 호출 자체를 피하는 습관을 가지고 있으면 자연스럽게 회피할 수 있는 문제라고 생각된다.