[React]twin.macro 사용하기

포스팅 목적

📖tailwind + styled components를 더욱 동적으로 사용하기 위한 twin.macro 사용에 대해서 알아보자.

사용목적

[React]TailwindCSS 사용해보기
[React]Tailwind + Styled Components 사용해보기

위의 게시글들을 포스팅하는 과정에서 느낀 것은 결국 Tailwind와 Styled Components를 혼합하여 적절한 컴포넌트를 생성하는 것이었다. 하지만 그러기에는 몇가지 제약사항이 있었다.

• tw(tailwind-styld-components)만 사용하면 css 파일을 별도로 config.js에 커스텀을 해주어야하는 불편함이 있다.
• tw 사용 시 props 사용에 대한 interface 선언이 TS에서 밖에 지원이 되지 않는다.
• styled.** 컴포넌트 내부에서 tw에 대한 클래스 사용에 제약사항이 발생한다.

더욱 많은 이유들이 있겠지만 나는 위의 사항들이 불편하여 해결방법을 찾아보다가 twin.macro를 알게되었다.

twin.macro란?

📖Tailwind CSS를 사용하기 위한 라이브러리로 styled-components를 사용하여 react 애플리케이션을 작성 할 때 클래스명 사용에 대한 편의성을 지원한다.

쉽게 설명하면 tailwind를 더욱 쉽게 작성하고 사용 할 수 있도록 지원하는 라이브러리이다.

twin.macro 사용

⚡️ 사용환경 설정

🖥️ 사전설치 항목

// 설치 경로 : React App 루트 디렉토리에서 npm 명령어 사용

// styled-components
npm install -D styled-components

// tailwindCSS
npm install -D tailwind
npx tailwind init

// tailwind-styled-components
npm install -D tailwind-styled-components

// twin.macro
npm install -D twin.macro @emotion/styled

// babel-plugin
npm install -D babel-plugin-macros

모든 항목을 -D를 이용해 Dev 모드로 설치를 진행하였다. 다음은 간단한 설정들을 해보자.

🖥️ 사용설정

babel-plugin-macros.config.js

// root 디렉토리 경로 내에 babel-plugin-macros.config.js 생성
module.exports = {
    twin: {
        preset: 'styled-components',
    },
}

package.json

...
  "babelMacros": {
    "twin": {
      "preset": "styled-components"
    }
  }
...

모든 패키지 설치가 끝나고 위의 두 파일에 대한 설정을 완료해주면 twin.macro를 사용 할 준비가 끝났다.

⚡️ 사용

🖥️ tw 이용

import tw from "twin.macro";

const TestDiv = tw.div`
	flex
	w-screen
	
	&{
		...
	}
`

tw를 이용하여 컴포넌트를 생성하면 하위 요소(&)에 대한 css가 제대로 동작하지 않는다. 이럴때는 styled 컴포넌트를 이용하면 된다. 아래 코드를 보자.

🖥️ styled components 이용

import tw, {styled} from "twin.macro";

const TestDiv = styled.div`
	${tw`flex`}

	&{
		...
	}
`

이러한 형태로 사용하면 된다.

주의를 해야하는 부분은 styled 컴포넌트 내부에 tailwind 클래스를 적용 할 때에는 백틱(`)을 반드시 사용하고 적용해주어야한다. 단점은 자동완성 기능이 지원되지 않는다. 그래서 나의 경우에는 태그 내부에서 원하는 클래스명을 찾아보고 복사해서 붙여넣는다.

🖥️ props 이용

import tw, {styled} from "twin.macro";

const TestDiv = styled.div`
	${tw`flex`}

	background: ${props => props.color}
`

위와 같은 형태로 컴포넌트를 정의하였다면 아래와 같이 props.color를 부여 할 수 있다.

...생략
<TestDiv color='blue'></TestDiv>

이 외에도 더욱 많은 기능들이 있지만 사용을 하면서 알아봐야 할 것 같다.

---

마무리

처음에는 TailwindCSS를 이용해서 스타일을 가볍게 입히려고 했지만 역시 하다보니 욕심이 많아지고 더욱 편리한 걸 찾게되는 것 같다. 그래서 순차적으로 빌드업을 하다보니 twin.macro까지 오게된 것이다.

백엔드 개발자로 성장하고 있지만 왜 이렇게 스타일에 집착하는지는 나도 알지 못한다. 그냥 불편하다. 안이쁘면 불편하다. 그렇다고 내가 이쁘게 만들 수 있는 건 아니지만... 참고하면 조금은 더 이뻐지니까 그러니까 계속 신경이 쓰이는 것 같다.

이제 정말로 새로운 프로젝트를 시작 할 준비가 된 것 같다.

그럼 이만.👊🏽