CRA로 만든 리액트 프로젝트에서 eject하지 않고 optional chaining 사용하기

CRA로 만든 프로젝트에서 optional chaining을 사용하려고 하니 이를 지원하지 않기 때문에 babel config에 해당 플러그인을 설치하라는 메세지가 떴다.

 

CRA eject를 할 경우 숨겨져있는 모든 설정들과 프로젝트가 가진 디펜던시들이 밖으로 나오기 때문에 너무 복잡하기도 하고 한번 eject한 프로젝트는 다시 되돌릴 수 없기 때문에 굳이 optional chaining 하나를 쓰자고 eject를 하는 것은 불필요해 보였다. 따라서 라이브러리들을 설치해서 비교적 간단한 방법으로 커스터마이즈 해주는 방법을 선택했다.

npm i -D @babel/plugin-proposal-optional-chaining customize-cra react-app-rewired

• @babel/plugin-proposal-optional-chaining: optional chaining 문법을 변환해주는 바벨 플러그인
• customize-cra, react-app-rewired: CRA를 커스터마이즈 할 수 있게 해주는 라이브러리

 

먼저 패키지 설치 후 루트 디렉토리에 .babelrc babel config파일을 만들어준 후 optional chaining에 대한 플러그인을 연결 시켜준다.

{  
    "plugins": [  
        [  
            "@babel/plugin-proposal-optional-chaining"  
        ],  
    ]  
}

 

그 다음 루트 디렉토리에 config-overrides.js 파일을 만들어주고 babel config파일을 override할 수 있도록 코드를 작성해준다.

const { useBabelRc, override } = require("customize-cra");
module.exports = override(useBabelRc());

 

마지막으로, 기존 react-script로 진행되던 리액트 스크립트를 아까 설치한 react-app-rewired로 실행시킬 수 있도록 package.json파일에서 script를 다음과 같이 변경한다.

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
    //eject에 대한 스크립트는 react-scripts를 사용한다.
  },

 

이렇게 하고나면 eject없이 원래 CRA에 설정된 값에 override해서 사용할 수 있다. 추가적으로 커스터마이징이 필요하다면 eject보다는 위의 방식으로 해결하는 것이 더 깔끔해보이기는 한다. 애초에 커스텀이 많이 필요하다면 굳이 CRA를 쓸 필요가 있을까 하는 생각이 들기도하고..?