IE11 에서 React 사용하기

남정호·2020년 12월 20일

ie11 에서 react 는 정상 동작하지 않는다.
해결 방법을 알아보자.

필자는 CRA 를 이용하였다.

1. 폴리필 적용

멍청한 ie도 리액트 코드를 읽을 수 있도록 폴리필을 적용해줄 것이다.

설치

npm install 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";
...

이렇게 했는데 안 된다. 다들 뭔 package.json 에 ie 11 을 추가하라던데 그거 해도 안 되더라.
위 방법이 안먹힌 이유는 react-script 버전이 너무 높아서이다.

react-script 버전 다운

npx create-react-app 을 사용했으면 최신 버전의 react-script 가 자동으로 설치 되었을 것인데, 최신 버전에서는 위의 폴리필이 안 먹더라. 그래서 버전을 강제로 낮췄다.

npm uninstall react-scripts
npm install react-scripts@3.2.0

이렇게 하고 실행하면 자잘한 컴파일 에러가 뜰 것인데(react와 react-script 간의 버전이 맞지 않기 때문) 큰 공수가 들지 않기 때문에 푸딱 고치고 실행하면 된다.

package.json 수정

"browserslist": {
    "production": [
      "ie 11", // 추가
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "ie 11", // 추가
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }