FrontEnd - Tailwindcss 동적 스타일링 하기

저는 요즘 tailwindcss 매력에 푹 빠져있습니다. 독창적인 디자인을 할 수 있으며 css속성들이 클래스로 이미 다 지정이 되어있어서 협업을 할 때에도 좋습니다. 

 

이번글에서는 tailwindcss 동적으로 스타일링하는법에 대해서 알아보겠습니다.

 

동적 스타일링이란 무엇일까요?

제가 생각하기에 동적스타일링이란 상태 또는 prop에 따라 컴포넌트의 UI가 바뀌는 것이라고 생각합니다. 

 

바로 코드부터 살펴보시죠.

 

안 좋은 예

export default function FlexBox({
  children,
  className = "",
  direction = "row",
  justify = "center",
  align = "center",
  gap = 0,
  as: Container = "div",
}: FlexBoxProps) {
  const justifyContent = justifyOptions[justify];
  const flexDirection = directionOptions[direction];
  const alignItems = alignOptions[align];
  const gapSize = `gap-${gap}`;
  return (
    <Container
      className={`flex ${flexDirection} ${justifyContent} ${alignItems} ${gapSize} ${className}`}
    >
      {children}
    </Container>
  );
}

실제 사이드 프로젝트에서 FlexBox를 모듈화 시킨 컴포넌트입니다. 여기서 gapSize로 선언된 변수를 잘 확인해 주시길 바랍니다. 

tailwindcss는 완전한 객체가 아닌 리터럴템플릿을 사용하여 동적 스타일링을 구현하면 테일윈드는 이를 인식하지 못하고 적용되지 않게 됩니다.

 

공식문서 동적 스타일링 나쁜 예시

그래서 저는 FlexBox에서 gap속성을 아예 지워버렸습니다 ㅎㅎ..ㅠ 왜냐하면 gap은 고정된 값이라기보단 컴포넌트 구현 요구사항에 따라 자유자재로 바뀔 수 있어야 하거든요. 

 

좋은 예

import Image from "next/image";
interface AvatarType {
  user_img: string;
  user_name: string;
  size?: "small" | "base" | "large";
}

export default function Avatar({
  size = "base",
  user_img,
  user_name,
}: AvatarType) {
  const avatarSizeVariants = {
    small: "w-8 h-8",
    base: "w-10 h-10",
    large: "w-12 h-12",
  };
  const avatarSize = avatarSizeVariants[size];
  return (
    <div className={`relative ${avatarSize}`}>
      <Image
        src={user_img}
        alt={user_name}
        fill
        priority
        className="absolute object-cover rounded-full"
      />
    </div>
  );
}

유저의 프로필 사진을 렌더링 해주는 Avatar 컴포넌트입니다. 아바타의 사이즈는 디자인시스템에 따라 세 가지 사이즈로 나뉘어있는데요. 해당 사이즈들은 prop으로 내려받게 되며 prop에 따라 동적으로 스타일링 됩니다. 위의 gapSize와 다른 점은 avatarSize 변수는 완전한 하나의 객체로 선언된 점입니다. 

 

위처럼 완전한 하나의 객체로 설정하여 동적스타일링을 해주면 테일윈드는 이를 인식하여 적용을 해줍니다.

 

공식문서 동적스타일링 좋은 예시