Tailwind CSS vs. Styled Component (Tailwind는 신세계)

https://github.com/jman-9/planit

 

리액트 실습 프로젝트를 열심히 구현하였다. CSS는 일단 진입장벽이 낮은 스타일드 컴포넌트를 적용해 보았다가 테일윈드로 전환 중이다. 서적으로 공부를 해보려고 찾아보니 전혀 없더라. GPT랑 얘기해봐도 너무 쉬우니 그냥 공식사이트 좀 참고하면 된단다.

GPT 조언대로 그냥 공식 사이트 조금 훑어보고 바로 작업을 해보았다. Sidebar 코드를 비교해보자.

순서대로 스타일드 컴포넌트 코드, 테일윈드 코드다.

import { Link, useLocation } from "react-router-dom";
import styled from "styled-components";

const SidebarLink = styled(Link)<{$isActive: boolean}>`&& {
  color: ${({ $isActive }) => $isActive ? "#1e40af" : "inherit"};
  font-weight: ${({ $isActive }) => $isActive ? "bold" : "inherit"};
}`;

export default function Sidebar() {
  const location = useLocation();

  const menu = [
    { label: "Dashboard", path: "/" },
    { label: "To-Do List", path: "/todo" },
    { label: "Bucket List", path: "/bucket" },
    { label: "Settings", path: "/settings" },
  ];

  return (
    <aside
      style={{
        width: "240px",
        backgroundColor: "#f5f5f5",
        color: "#333",
        padding: "1rem",
        minHeight: "100vh",
        borderRight: "1px solid #ccc",
      }}
    >
      <Link to="/">
        <h2 style={{ marginBottom: "2rem" }}>📌 PlanIt</h2>
      </Link>
      <nav style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
        {menu.map(({ label, path }) => {
          const isActive = location.pathname === path;
          return (
            <SidebarLink
              key={path}
              to={path}
              $isActive={isActive}
            >
              {label}
            </SidebarLink>
          );
        })}
      </nav>
    </aside>
  );
}

 

import { Link, useLocation } from "react-router-dom";

export default function Sidebar() {
  const location = useLocation();

  const menu = [
    { label: "Dashboard", path: "/" },
    { label: "To-Do List", path: "/todo" },
    { label: "Bucket List", path: "/bucket" },
    { label: "Settings", path: "/settings" },
  ];

  return (
    <aside className="w-64 bg-gray-100 text-gray-800 p-4 min-h-screen border-r border-gray-300">
      <Link to="/">
        <h2 className="mb-8">📌 PlanIt</h2>
      </Link>
      <nav className="flex flex-col gap-2">
        {menu.map(({ label, path }) => {
          const isActive = location.pathname === path;
          return (
            <Link className={isActive ? "text-blue-800 font-bold" : ""} key={path} to={path}>
              {label}
            </Link>
          );
        })}
      </nav>
    </aside>
  );
}

 

사람마다 반응이 다르겠지만, 적어도 나에게는 커다란 충격이다!

정말이지 너무너무 쉽고 직관적이었다. '아, 그래서 관련서적이 없구나'

스타일드 컴포넌트의 쌩CSS는 뭔가 머리 속에 그리기가 애매했지만, 테일윈드는 정말 읽히는대로 그려진달까.

코딩을 직접해보니, 스타일드 컴포넌트가 맞춤옷이라면 테일윈드는 기성복 같은 느낌이다. 맞춤옷과 기성복 중 어느 쪽이 파이가 큰지는 말할 필요도 없겠다.

왜 테일윈드가 CSS 프레임워크 쪽에서 압승 중인지 확실히 알게 되었다.

테일윈드 개발자의 은혜로움을 찬양하며, 더 열심히 구현을 해야겠다.

 

PS : 물론 내가 스타일드 컴포넌트를 잘못써서 차이가 커보일수도...