Twin.macro 알아보기

Twin.macro

Tailwind CSS와 css-in-js 프레임워크를 통합하여 사용할 수 있는 라이브러리로 emotion이나 styled-components를 같이 사용할 수 있다.

• twin.examples 깃허브
• npm twin.macro 공식문서

Tailwind CSS

tailwind css는 Utility-First 컨셉을 가진 CSS 프레임워크이다. 각 class가 담당할 스타일을 미리 정의해 필요한 class들을 조합하여 적용하는 식으로 사용한다.

• CSS를 보다 직관적으로 작성할 수 있다.
• 쉽게 반응형 페이지를 만들 수 있다.
• margin-top: 5px 의 경우 mt-5 로 작성해야 하는, 기존 CSS 속성을 사용하지 못한다는 단점이 있다.
• 인라인 스타일링으로 className 이 상당히 길어져 코드가 지저분해진다는 단점이 있다.

Tailwind 공식문서

emotion

CSS-in-JS 프레임워크이다.

• 별도 css파일 작성 없이 JS 코드 안에서 스타일을 사용할 수 있다.
• className 자동 부여로 클래스명이나 스타일 중복이 일어나지 않는다.
• 재사용이 가능하다.
• styled component 사용방식과 css prop 기능 지원
• SSR 할 시 서버 작업이 필요 없다.

emotion 공식문서

Babel Macro

바벨 매크로는 코드를 변환할때마다 별도 플러그인을 설치하지 않아도 바로 코드 변환을 적용할 수 있는 방법이다.

npm babel-plugin-macros

설치 방법

npm install --save-dev babel-plugin-macros

// .babelrc

{
	"plugins": ["macros"]
}

일일히 컴파일 할 필요가 없어 typescript, next.js와 같은 프로젝트에서 유용하게 사용된다.

Next.js와 사용하기

create-react-app 에는 babel-plugin-macros 가 포함되어 있지 않아서 .babelrc.js 파일을 생성하여 추가적으로 설정해주어야 한다.

// .babelrc.js

module.exports = {
    presets: [['next/babel', { 'preset-react': { runtime: 'automatic' } }]],
    plugins: [
      'babel-plugin-macros',
      ['babel-plugin-styled-components', { ssr: true }],
    ],
}