[React.js] @emotion/styled + Tailwind (feat. Twin Macro)에 대해 알아보자

❗ 서론

난 이 전 프로젝트에서 styled-components 라이브러리를 사용했었다.

하지만 더 새롭고 사람들이 많이 쓰고 좋은 !! 라이브러리를 쓰고싶다는 생각이 들었다.

그러다 찾은것이 바로 제목이 나와있는 @emotion/styled와 TailWind와 Twin Macro의 삼합.

 

지금부터는 질답형으로 내 생각을 풀어가겠다.

 

1. 왜 쓰고있던 styled-components가 아닌 @emotion/styled + Tailwind를 채택해서 사용하는가 ? 

성능, 용량, 많은 이슈들과 코드 스타일의 차이도 하나하나 짚으면 좋겠지만

난 매 번 생각하는게 "경쟁력 있는 개발자"이다

그렇기에 난 라이브러리 인기에 대한 차트를 참고하여 선택했다

출처 : 코드너리

1위는 storybook, 2위는 emotion, 3위는 Tailwind이다.

 

2. 왜 @emotion/core가 아닌 @emotion/styled를 채택해서 사용하는가 ?

@emotion/styled와 @emotion/core의 주요 차이점은 @emotion/styled가 스타일이 지정된 구성 요소를 정의하는 데

더 편리한 구문을 제공한다는 것이다.

 

해당 부분에 대해선 간단하게 예제를 보고 넘어가겠다.

 

- @emotion/core

const Button = styled.button`
  font-size: 16px;
  color: white;
  background-color: ${({ color }) => color};
  padding: 8px 16px;
  border-radius: 4px;

  &:hover {
    background-color: ${({ color }) => darken(0.1, color)};
  }
`;

const blueButtonStyles = css`
  color: white;
  background-color: blue;
`;

const redButtonStyles = css`
  color: white;
  background-color: red;
`;

const EmotionExample = () => {
  return (
    <>
      <Button css={blueButtonStyles}>Blue Button</Button>
      <Button css={redButtonStyles}>Red Button</Button>
    </>
  );
};

- @emotion/styled

const StyledButton = styled.button`
  font-size: 16px;
  color: white;
  background-color: ${({ color }) => color};
  padding: 8px 16px;
  border-radius: 4px;

  &:hover {
    background-color: ${({ color }) => darken(0.1, color)};
  }
`;

const StyledExample = () => {
  return (
    <>
      <StyledButton color="blue">Blue Button</StyledButton>
      <StyledButton color="red">Red Button</StyledButton>
    </>
  );
};

유연성과 재사용성은 @emotion/core가 좋다고 한다지만 이래저래 찾아본 바로는 
@emotion/styled가 @emotion/core에 비해 모든 부분이 좋다고 느껴졌다.

 

3. 왜 @emotion/styled + TailWind + Twin Macro를 결합해서 사용하는가 ?

는 이제 알아보자.

 

❗ @emotion/styled + TailWind + Twin Macro

이제 본격적으로 이 삼합을 사용하는 이유에 대해서 알아보자.

 

1. Twin.macro는 @emotion/styled 구문으로 Tailwind CSS 클래스를 사용할 수 있는 방법을 제공하는 라이브러리이다. @emotion/styled 구문을 사용하여 CSS 스타일을 작성하고 해당 스타일의 속성으로 Tailwind CSS 클래스를 사용하면 구성 요소에 대한 스타일을 더 쉽고 빠르게 만들 수 있다.
2. @emotion/styled와 함께 twin.macro와 함께 Tailwind CSS를 사용하면 두 라이브러리의 이점을 모두 활용할 수 있다.

3. Tailwind CSS에서 제공하는 유틸리티 클래스를 사용하여 구성 요소의 스타일을 빠르게 지정하는 동시에 @emotion/styled를 사용하여 필요할 때 더 복잡한 스타일을 작성할 수 있다.

4. twin.macro는 코드에서 사용하는 필수 CSS 클래스만 사용하여 일부 최적화 및 번들 크기 축소를 제공할 수 있다.

 

짧게 말하자면 

@emotion/styled의 단순성과 유연성 + Tailwind의 강력한 유틸리티 클래스를 사용할 수 있는데

이 것을 해주는데 필요한 라이브러리가 Twin Macro라고 한다.

 

이 번 글에서는 그냥 CSS-IN-JS 라이브러리를 채택하는 과정에서 얻은 주절주절 이였다.

 

환경설정 및 설치 방법에 대해선 많은 좋은 글들이 있으니 넘어가도록하자 ..