ReactJS에서 IE 11 호환 처리

ReactJS에서 IE 11 호환 처리

1. react-app-polyfill

- 리엑트 개발에서 사용하는 다양한 문법을 변환해주는 라이브러리입니다.
    + Promise, window.fetch, Symbol, Object.assign, Array.from + [ IE9 Map, Set ]등 최소한만 포함하고 있어 사이즈가 작고 가벼운 게 특징

- 설치 

$> npm install react-app-polyfill

- 사용법
    + stable은 package.json의 browserslist에 해당하는 브라우저에 대해 안정적인 코드를 사용 가능

// index.js import 설정
// IE9의 경우
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

// IE11의 경우
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

2. @babel/polyfill

- 프로젝트에서 async, await, function*를 프로젝트에서 활용하는 경우 설치
- 설치 

$> npm install core-js regenerator-runtime

- 사용법

//index.js import 설정
import 'core-js/stable';
import 'regenerator-runtime/runtime';

3. IE=edge 설정

- IE에서 최신 버전으로 호환성 보기가 되도록 설정
- 사용법

<!-- index.html 추가 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

이렇게 3가지를 처리하면 IE 11에서 어느 정도 동작합니다.

하지만 몇몇 javascript, css는 오동작하니 수동으로 수정이 필요 할 수 있습니다.

참고자료

• react, IE에서 호환(크로스브라우징)