Babel 이란? +babel-plugin-macros

Babel은 JS 트랜스파일러 입니다.

트랜스 파일러 : 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환해주는 얘

Babel은 주로 최신 JS (ES6 이상)을 구형 브라우저에서도 동작할 수 있도록 ES5 같은 이전 버전의 JS로 변환하는 데 사용됩니다.

또한, React의 JSX같은 문법도 JS로 변환해 줍니다.

 

const add = (a, b) => a + b;

ES6 에서 도입된 화살표 함수 이기에 Babel을 사용하면

var add = function(a, b) {
return a + b;
};
이렇게 변환 된다.

const element = <h1>Hello, world!</h1>;
같은 JSX는

const element = React.createElement('h1', null, 'Hello, world!');
이런식으로 변환된다.

 

사용 방법

 - .babelrc 파일 사용: 프로젝트의 루트 디렉토리에 .babelrc 파일을 생성하고, Babel 설정을 이 파일에 작성하면 프로젝트 전체에 걸쳐 일관된 변환 규칙을 적용할 수 있습니다.

babel-plugin-macros

이번에 개인 사이드프로젝트용 템플릿을 제작했을때,
babel-plugin-macros 플러그인을 사용했습니다.

컴파일 시간에 코드를 변환해주는 매크로를 걸어줌으로,

 

   { export: "jsx", import: "__cssprop", module: "@emotion/react" }

 

해당 설정을 넣어주어

jsx 함수를 @emotion/react 모듈에서 import 하여 사용하도록 설정합니다. 이를 통해 Emotion을 사용한 스타일링이 JSX와 잘 통합될 수 있도록 합니다.

이 설정은 Emotion을 사용하여 스타일링된 컴포넌트를 작성할 때, JSX 변환 과정에서 Emotion의 jsx 함수를 자동으로 사용하도록 해서, Emotion의 CSS prop과 같은 기능을 원활하게 사용할 수 있게 해줍니다.

Emotion과 같은 CSS-in-JS 라이브러리를 사용할 때, 이러한 플러그인을 사용하면 개발자가 수동으로 모든 파일에 /** @jsxImportSource @emotion/react */와 같은 주석을 추가하지 않아도 되므로, 개발 편의성을 크게 향상시킬 수 있습니다.