React 폴리필과 브라우저 호환성 관리

개요

React 애플리케이션에서 최신 문법과 API를 사용하면 개발 생산성이 올라간다. 다만 다양한 브라우저를 지원하려면 폴리필(polyfill)과 빌드 도구 설정을 함께 고려해야 한다. 이 글은 React에서 폴리필을 이해하고, core-js와 Babel, browserslist를 활용해 호환성을 관리하는 흐름을 소개한다.

폴리필이란 무엇인가

폴리필은 특정 브라우저에서 지원하지 않는 자바스크립트 기능을 제공하는 코드다. 예를 들어 Promise, Array.prototype.includes, 또는 최신 전역 API가 대상이다. 폴리필은 런타임에 필요한 기능을 추가하므로 코드가 더 넓은 환경에서 동작하게 만든다.

왜 브라우저 호환성 관리가 필요한가

사용자 기반이 다양한 웹 서비스는 구형 브라우저에서도 오류 없이 동작해야 한다. 그러나 모든 폴리필을 무조건 포함하면 번들 크기가 커진다. 따라서 빌드 단계에서 타깃 브라우저를 지정하고, 필요한 폴리필만 포함하는 방식이 효율적이다.

핵심 도구와 역할

• Babel(preset-env): 소스 코드를 타깃 브라우저에 맞게 트랜스파일.
• core-js: 표준 라이브러리 폴리필 제공.
• browserslist: 어느 브라우저를 지원할지 명세.
• react-app-polyfill: CRA 기반 프로젝트의 간편 폴리필 진입점.

설정 흐름

일반적인 설정 순서는 다음과 같다.

• 타깃 브라우저를 정의(browserslist)
• Babel preset-env와 core-js 버전 연동
• 애플리케이션 진입점에서 필요한 폴리필만 로드
• 번들 최적화와 테스트

browserslist 설정 예

package.json에 browserslist를 추가하면 빌드 도구가 참조한다.

{
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all",
    "ie 11"
  ]
}

Babel + core-js 설정

preset-env를 사용하면 사용자가 정의한 browserslist에 맞춰 필요한 변환과 폴리필을 자동으로 결정한다. core-js는 폴리필 소스를 제공한다.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    "@babel/preset-react"
  ]
}

useBuiltIns: "usage"는 코드에서 사용한 기능만 자동으로 폴리필하도록 한다. corejs: 3으로 버전 명시가 필요하다.

CRA(react-scripts) 환경에서의 폴리필

Create React App을 사용하면 react-app-polyfill을 진입점에 추가하는 방식이 간편하다. 진입 파일 최상단에 넣으면 호환성 폴리필이 로드된다.

// src/index.js
import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

Webpack 기반 커스텀 설정

직접 Webpack을 사용하는 경우, entry에서 core-js를 명시하거나 Babel 설정을 통해 관리한다.

// src/index.js
import "core-js/stable";
import "regenerator-runtime/runtime";
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(<App />, document.getElementById("root"));

권장 전략

• 프로젝트 초기 단계에서 browserslist를 명확히 정의.
• Babel preset-env의 useBuiltIns: "usage"와 core-js 3 조합으로 불필요한 폴리필 배제.
• CRA 사용 시 react-app-polyfill로 간단히 적용.
• 중요한 API는 런타임 체크와 폴리필 동적 로드를 고려.

동적 폴리필 로드 예

특정 기능만 필요할 때는 런타임에 조건부로 로드해 초기 번들 크기를 줄일 수 있다.

if (!Array.prototype.includes) {
  import("core-js/features/array/includes");
}

if (typeof Promise === "undefined") {
  import("core-js/features/promise");
}

테스트와 모니터링

실제 타깃 브라우저에서 주요 기능을 확인하는 것이 중요하다. 크로스브라우징 테스트 도구나 실사용자 모니터링(RUM)을 통해 문제를 조기에 발견할 수 있다. 또한 번들 분석 도구로 폴리필 포함량을 주기적으로 점검한다.

결론

React에서 브라우저 호환성 관리는 도구 조합과 설정으로 해결된다. core-js와 Babel preset-env, browserslist를 함께 쓰면 필요한 폴리필만 포함해 번들을 최적화할 수 있다. 프로젝트 성격에 따라 CRA의 react-app-polyfill이나 동적 로드 전략을 선택하면 효율적이다.