[styled-components] 망했다 완전히 잘못 썼구나!!!!

랑·2025년 4월 6일
styled components

조각 모음

목록 보기
1/9

😱 사건의 발단입니다

프론트엔드 강의 수료 후 기본기가 너무나도 부족하다는 것을 느끼고 다시 처음으로 돌아가 공부하고, 이전 프로젝트들을 들여다보던 중 충격적인 사실과 만나게 됐다. 아니 어쩌면 이제라도 알게 된 게 다행일지도...

문제는 1차 팀프로젝트에서 발견됐다.

당시 팀장이었던지라 이런저런 툴들을 어떻게 써야 효율적으로 잘 쓸 수 있을까 고민이 정말 많았고, 더욱이 styled-components를 처음 써 보기에 가이드가 필요해 챗GPT나 클로드에게 집요하고 세세하게 질문을 했었다.

그 때 고민했던 것 중 하나가 styled-components로는 너무 간단한 스타일링 코드를 쓰기에는 너무 과하지 않나? 였고, 받은 대답은 className과 혼용하기보다는 오로지 styled-components로만 스타일링하라는 거였다.

그래서 styled-components로만 작업했는데 역시나 너무 과하다는 생각이 끊임없이 들었지만 턱없이 시간이 부족해 마음속 한켠에는 의문을 가진 채로 계속 작업했다.

그리고 다시 오늘, 다시 본 코드에서 그 때와 똑같은 의문을 느껴 챗GPT에게 프로젝트 때 작성한 코드를 던져주고 다시 질문했다.

이 질문과 답변으로 이해가 많이 되어서 최대한 원문의 느낌으로 정리했다.
굉장히..길어서 시간 많은 분들만 보시거나 마지막 부분만 참고해주시면 좋겠다.


🏫 GPT 선생님과 면담 시작

Q.

vite, redux, styled-components 사용해서 프로젝트 했었는데, 그 때 styled-component 쓰는 경우에 className 붙여서 쓰는 방법 혼용하면 별로 안 좋다고 들어서 오로지 styled-component로만 스타일링 했었는데 그게 맞아? styled-components로만 스타일링 하는 게 간단한 스타일링만 필요한 경우에는 너무 번거롭고 비효율적이지 않나 해서.


A.

상황마다 적절한 방식이 다를 수 있다.

✅ styled-components만 쓰는 것이 권장되는 경우

  • 컴포넌트 기반 스타일을 철저하게 유지하고 싶을 때.
    → UI가 작고, 디자인 시스템이 명확하게 구성된 경우에는 일관성과 재사용성 측면에서 좋음

  • 팀이 CSS-in-JS에 익숙하고, 전체 프로젝트가 styled-components에 완전히 의존하고 있는 경우.
    → 혼합 사용은 코드베이스가 복잡해지거나 유지보수 시 혼란을 줄 수 있음.

  • 동적 스타일링 (props로 조건부 스타일링 등)을 많이 쓸 때.
    → className 방식보다 styled-components가 훨씬 간결하고 명확함.


❌ styled-components만 쓰는 것이 비효율적인 경우

  • 간단한 스타일 (ex. margin, padding, flex 등)만 필요한 경우
    → className이나 Tailwind 같은 유틸리티 클래스가 훨씬 빠르고 직관적임.
    → styled-components로는 작은 것도 파일 따로 만들거나 코드가 길어져서 귀찮음.

  • 프로젝트 규모가 작고, 스타일 재사용 필요가 적을 때
    → styled-components로 굳이 컴포넌트화하는 건 오히려 오버엔지니어링이 될 수 있음.


😕 styled-components + className 혼용을 추천하지 않는 이유는?

  • 스타일 충돌 위험: className 기반 스타일이 styled-components의 우선순위를 깨뜨릴 수 있음.
  • 일관성 저하: 어떤 컴포넌트는 styled, 어떤 건 className... 팀원 간 규칙 없으면 혼란 생김.
  • 디버깅 어려움: styled-components는 내부적으로 고유한 className을 생성하기 때문에 CSS 추적이 복잡해질 수 있음.

💡 그래서 어떻게 쓰는 게 좋을까?

간단한 스타일엔 className이 훨씬 편하다고 느낄 때는 케이스 바이 케이스로 가는 것도 좋음

예시:

// styled-components로 공통 버튼 정의
const StyledButton = styled.button`
  padding: 12px 16px;
  border-radius: 8px;
  background-color: #007bff;
  color: white;
`;

// 하지만 간단한 레이아웃엔 className으로 처리
<StyledButton className="mr-4" onClick={...}>Click</StyledButton>

혹은 emotion이나 Tailwind + styled-components 조합도 많이 씀.


결론적으로:

📌 styled-components만 고집할 필요는 없음.
프로젝트 성격과 팀 컨벤션에 따라 styled-components와 className(혹은 유틸리티 CSS) 혼용도 가능함.
단, 혼용 시엔 명확한 기준을 팀 내에서 정하는 게 핵심!


Q.

그럼 보통 styled-components랑 같이 쓸 땐 뭘 많이 써? 그리고 혼용 시 기준을 정할 때 주로 어떤 걸 고려하는지도 궁금해


A.

현업에서도 styled-components와 다른 스타일링 방식 혼용하는 경우가 꽤 많고, 그럴 땐 "무엇이랑 어떻게 섞어쓸지" + "기준을 어떻게 잡을지" 이 두 가지가 중요함.

✅ styled-components와 같이 자주 쓰는 방식

  1. 유틸리티 클래스 (Tailwind CSS)

  • 최근 styled-components + Tailwind 조합이 많이 사용됨.

  • 장점:

    • 반복적인 margin/padding/flex 같은 부분은 Tailwind로 간단하게 처리
    • styled-components는 구조적 스타일, 조건부 스타일에 집중

  • 사용 예시:

    const Card = styled.div`
  border-radius: 12px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
`;

<Card className="p-4 flex items-center">내용</Card>

  1. CSS Modules

  • 컴포넌트 단위로 분리하면서도 전통적인 className 사용을 원할 때

  • styled-components는 로직과 조건부 스타일

  • CSS Modules는 정적 스타일

// styles.module.css
.title {
  font-size: 20px;
  color: #333;
}

// 컴포넌트
const Title = styled.h1``;

<Title className={styles.title}>Hello</Title>

  1. 정적 전역 스타일 (전역 CSS / reset / typography 등)
  • normalize.css / reset.css
  • styled-components의 createGlobalStyle로 처리하기도 함

📌 혼용 시 기준을 정할 때 고려하는 요소

고려 요소설명예시 기준
스타일 복잡도동적이면 styled-components, 단순하면 classNamepadding, flex: Tailwind / 조건부 색상: styled
재사용 여부재사용 많으면 styled-components버튼, 카드 등 공통 UI
팀원 숙련도팀이 Tailwind에 익숙하다면 혼용 OK“레이아웃은 Tailwind로, UI는 styled로”
프로젝트 성격스타일 시스템이 있는지, 빠른 개발이 우선인지디자인 시스템 있다면 styled-components 집중
일관성 유지혼용 시 naming/구조 규칙 정의 필요className은 레이아웃 전용 등

📘 혼용 시 가이드 예시

✅ styled-components 사용
- 컴포넌트 스타일 정의 (Button, Modal, Card 등)
- 동적 스타일 (props로 color, size 등)

✅ Tailwind 또는 className 사용
- 간단한 레이아웃 (flex, gap, margin 등)
- spacing, alignment, typography
- 1회성 스타일링 (임시 margin 등)

이후 실제 예제를 보면 더 구체적인 가이드를 제공할 수 있다고 해 팀프로젝트 당시 작성한 코드 일부분을 제공했다.

Q.

jsx 파일 일부

  return (
    <>
      <ModalTop>
        <VideoWrap>
          <VideoBox
            src={`https://www.youtube.com/embed/${videoId}?${opts}`}
            title="애니메이션 '괴수 8호' 제1기 총집편"
            allow="autoplay; encrypted-media;"
            allowFullScreen
            style={{ pointerEvents: 'none' }}
          />
          <Overlay />
        </VideoWrap>

        <TopInner>
          <h1>
            <img
              src=""
              alt=""
            />
          </h1>
          <ProgressBar>
            <div></div>
          </ProgressBar>
          <TopBtns>
            <div>
              
          </TopBtns>

          <VideoDesc>
            <strong>2025년 리미티드 시리즈</strong>
            <FlexBox>
              <p>{formattedOverview}</p>
              <InfoDetail>
                <div>
                  <strong>제작</strong>
                  <p>
                    {production_companies.map((item) => (
                      <span key={item.id}>"{item.name}" </span>
                    ))}
                  </p>
                </div>
                <div>
                  <strong>시리즈 특징 </strong>
                  <p>
                    {genres.map((item) => (
                      <span key={item.id}>"{item.name}" </span>
                    ))}
                  </p>
                </div>
              </InfoDetail>
            </FlexBox>
          </VideoDesc>
        </TopInner>
      </ModalTop>

      <ModalMain>
        <EpisodeSec>
          <EpisodeTop>
            <h2>회차</h2>
            <SeasonSelect name="series" id="series">
              <option>리미티드 시리즈</option>
              <option value="1">스페셜</option>
              <option value="2">1기</option>
              <option value="3">2기</option>
            </SeasonSelect>
          </EpisodeTop>
    </>
  );
};

style.js 파일 일부

export const ModalWrap = styled.div`
  position: relative;
  width: 1440px;
  min-width: 1440px;
  margin: auto;
  top: 50px;
  background-color: #fff;
  border-radius: 60px;
  overflow: hidden;
  button {
    border: none;
  }
`;

export const ModalTop = styled.div`
  position: relative;
  width: 1440px;
  height: 1079px;
`;

export const VideoWrap = styled.div`
  width: 100%;
  height: 878px;
  overflow: hidden;
`;

export const VideoBox = styled.iframe`
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  scale: 1.3;
`;

export const Overlay = styled.div`
  position: absolute;
  top: 758px;
  width: 1440px;
  height: 120px;
  background: linear-gradient(to top, rgba(255, 255, 255, 1) 13%, rgba(255, 255, 255, 0.2) 70%, transparent 100%);
  z-index: 2;
`;

export const TopInner = styled.div`
  position: absolute;
  bottom: 0;
  width: 1440px;
  height: 596px;
  padding: 0 60px;
  z-index: 2;
  img {
    width: 401px;
    height: 155px;
  }
`;

export const ProgressBar = styled.div`
  width: 515px;
  height: 8px;
  background: #ffffff;
  border-radius: 9px;
  margin-top: 65px;
  margin-bottom: 30px;
  div {
    width: 305px;
    height: 8px;
    background: #0068ff;
    border-radius: 9px;
  }
`;

export const TopBtns = styled.div`
  display: flex;
  justify-content: space-between;
  margin-bottom: 80px;
  button {
    background-color: transparent;
    img {
      height: 68px;
      width: auto;
    }
  }
`;

export const VideoDesc = styled.div`
  > strong {
    font-size: 21px;
    font-weight: 600;
  }
`;

export const FlexBox = styled.div`
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  > p {
    width: 743px;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.02em;
    white-space: pre-wrap;
    flex-grow: 1;
    padding-right: 165px;
  }
`;

export const InfoDetail = styled.div`
  display: flex;
  flex-direction: column;
  gap: 23px;
  font-size: 15px;
  div {
    display: flex;
    color: #5f5f5f;
    line-height: 18px;
    white-space: pre;
    &:last-child p {
      display: flex;
    }
  }
  strong {
    font-weight: 600;
    color: #1c1c1c;
    margin-right: 17px;
  }

  span {
    margin-right: 5px;
    &:last-child {
      margin-right: 0;
    }
  }
`;

export const ModalMain = styled.div`
  width: 1440px;
  h2 {
    font-weight: 600;
    font-size: 25px;
    line-height: 30px;
    margin-bottom: 50px;
  }
`;

export const EpisodeSec = styled.div`
  position: relative;
  padding: 37px 60px 74px 60px;
  width: 100%;
  overflow: hidden;
  hr {
    border: none;
    height: 1px;
    background-color: #c5c5c5;
    &:last-of-type {
      height: 3px;
      background-color: #7d7d7d;
    }
  }
`;

export const EpisodeTop = styled.div`
  display: flex;
  justify-content: space-between;
  h2 {
    margin-bottom: 0;
  }
`;

A.

이 정도 규모의 모달 UI면 styled-components만으로 구성한 이 방식이 확실히 컴포넌트 단위로 스타일을 구조화하고 관리하기에는 깔끔하고 재사용성이 좋음. 하지만 질문한 것처럼, 경우에 따라 styled-components만 고집하는 게 비효율적으로 느껴질 수도 있어 아래에 기준을 정리함.


✅ 이 프로젝트에서 styled-components만 쓴 것이 적절한 이유

  • UI가 명확히 구획된 컴포넌트 기반이라서 재사용성이 높은 구조
  • 다양한 상태 관리(popup, visibleItem 등)를 컴포넌트 내에서 하므로 props 스타일링이 자연스럽게 연결됨
  • 디자인 시스템에 가까운 고정된 스타일 레이아웃이라 클래스보다 컴포넌트 단위 관리가 더 직관적

🤔 다만 이런 상황이라면 className(예: Tailwind) 혼용 고려해볼 수 있음

상황설명className 예시 사용 가능
단순한 margin/padding 조정만 필요styled-components 만들기엔 너무 사소함className="mt-4"
일회성 스타일특정 케이스에만 쓰는 스타일이라 재사용 XclassName="text-red-500"
빠른 시안 구성 필요초기 UI 구성 속도가 중요할 때Tailwind로 뼈대 잡고 추후 styled로 리팩토링
스타일 조건부 분기가 거의 없음styled-components 쓰면 오히려 길어짐className={isDark ? 'bg-black' : 'bg-white'}

🧭 이 프로젝트에 적용할 수 있는 혼용 가이드 (제안)

✅ styled-components 사용
- Modal, TopBtns, Desc 등 구조적 스타일
- props를 활용한 동적 스타일
- 공통 UI 컴포넌트 (버튼, 카드 등)

✅ className 사용
- margin/padding, flex 등 레이아웃
- 1회성 색상, hover 스타일 등

🚫 금지
- 같은 컴포넌트에 styled-components + 복잡한 className 동시 사용 (혼란 유발)

지금 프로젝트처럼 스타일 요소가 크고 구조적인 컴포넌트가 많을 때는 styled-components 중심으로 가는 게 유지 보수 측면에서도 좋으나, 위에서 말한 단순 스타일 같은 건 className으로 빠르게 처리해도 되고, 팀 내 규칙만 명확하면 혼용해도 충분히 효율적

여기까지 들으니 styled-components의 사용이 불편하게 느껴졌던 게 내가 제대로 활용하지 못하고 있었기 때문이라는 게 느껴졌다.

Q.

음 유지보수측면에서 styled-components가 좋다는 건 알겠는데, 그렇다면 내가 작성한 예시 코드에서는 충분히 styled-components로 작성한 스타일링코드를 재사용하지는 못한 것 같아. 다른 파일을 만들 때에도 여기에서 만든 스타일링 코드를 재사용하지 않고 새로 스타일 파일을 만들어서 이 스타일 파일처럼 전부 따로 스타일링했거든.


A.

styled-components를 쓴 이유 중 하나가 재사용성과 컴포넌트화된 스타일링인데, 만약 파일마다 새로 스타일 정의해서 복붙 수준이 됐다면 오히려 효율성이 떨어졌을 가능성도 있음

😵‍💫 styled-components인데 재사용이 안 되는 흔한 케이스 (내 팀플 코드는 이 모든 게 해당됐다..)
1. 모든 컴포넌트에 style 파일이 따로 있고 구조가 거의 비슷함
→ ModalTop, ModalMain, Section, TopBtns 등이 다른 곳에서도 거의 동일하게 반복됨
2. 공통 컴포넌트가 없음
→ 예: SectionTitle, PrimaryButton, FlexRow, CardWrap 같은 컴포넌트가 없음
3. 스타일 네이밍도 컨텍스트 기반이라 재사용이 더 어려움
→ 예: EpisodeSec, VideoDesc, PvCard 등은 다른 파일에서 그대로 못 씀


🛠 해결 방향: styled-components 재사용 가능한 구조로 정리하기

  1. ✅ 공통 스타일 컴포넌트 폴더 따로 만들기
    예: src/components/commonStyle/
// src/components/commonStyle/Section.ts
import styled from 'styled-components';

export const Section = styled.section`
  padding: 40px 60px;
  width: 100%;
`;

export const SectionTitle = styled.h2`
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 30px;
`;

export const Divider = styled.hr`
  border: none;
  height: 1px;
  background-color: #c5c5c5;
`;

  1. ✅ 반복되는 스타일은 유틸 형태로 추출
// src/styles/flex.ts
import { css } from 'styled-components';

export const flexBetween = css`
  display: flex;
  justify-content: space-between;
`;

export const flexColumnGap = (gap = 10) => css`
  display: flex;
  flex-direction: column;
  gap: ${gap}px;
`;

사용 예:

const EpisodeTop = styled.div`
  ${flexBetween}
`;

  1. ✅ 재사용 가능한 공통 버튼 컴포넌트 만들기
// src/components/common/Button.tsx
import styled from 'styled-components';

export const IconButton = styled.button`
  background: transparent;
  border: none;
  padding: 0;
  img {
    height: 68px;
    width: auto;
  }
`;

💡 리팩토링 포인트 요약

문제해결 방법
style 파일마다 중복 정의공통 스타일로 추출 (예: Section, Title, Divider)
비슷한 버튼들 많음공통 버튼 컴포넌트 생성 (IconButton)
layout 반복 (flex, padding 등)유틸 CSS (flex.ts)로 관리
네이밍이 재사용 어렵게 됨역할 중심 네이밍으로 바꾸기 (예: VideoDesc → DescriptionBox)

지금처럼 styled-components만 쓰는데도 재사용을 안 하면 결국 '컴포넌트화된 CSS'가 아니라 그냥 CSS-in-JS일 뿐이야.
진짜 장점을 누리려면 공통 컴포넌트화와 스타일 추상화가 꼭 필요해!

Q.

그렇지? 어쩐지 나도 styled-components 만 쓰는 쪽으로 추천받았는데 오히려 불편한 것 같아서 의문이었는데 재사용을 잘 못해서였던 것 같아. 그러면 애초에 프로젝트 초기 단계에 공통 섹션간 간격이나 폰트스타일, 미디어쿼리 등 전역변수나 믹스인을 설정해두는 것처럼 styled-components로 반복적으로 사용되는 변수들을 만들어서 사용했어야 제대로 사용했다고 할 수 있는거구나?


A.

응 딱 그거야! 👏
styled-components를 "제대로" 썼다고 할 수 있으려면 단순히 styled.div만 열심히 만드는 게 아니라 처음부터 반복될 요소들에 대해 공통 규칙을 설정해두는 작업이 핵심이야.


🔧 프로젝트 초기 세팅에서 styled-components 제대로 활용하려면?

✅ 1. 공통 theme 설정 (spacing, font, color 등)
styled-components는 ThemeProvider를 지원하니까, 이런 식으로 디자인 토큰을 만들어 놓으면 편해.

// theme.ts
const theme = {
  colors: {
    primary: '#0068ff',
    gray100: '#f5f5f5',
    text: '#1c1c1c',
  },
  fontSize: {
    sm: '14px',
    base: '16px',
    lg: '18px',
    xl: '25px',
  },
  spacing: {
    sm: '8px',
    md: '16px',
    lg: '32px',
  },
};

export default theme;
// App.tsx
import { ThemeProvider } from 'styled-components';
import theme from './theme';

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>
// styled.ts
const Title = styled.h2`
  font-size: ${({ theme }) => theme.fontSize.xl};
  color: ${({ theme }) => theme.colors.text};
`;

✅ 2. 미디어쿼리 유틸 설정

// styles/media.ts
const breakpoints = {
  tablet: '768px',
  desktop: '1024px',
};

export const media = {
  tablet: `@media (max-width: ${breakpoints.tablet})`,
  desktop: `@media (min-width: ${breakpoints.desktop})`,
};
// 사용 예시
import { media } from '../styles/media';

const Wrapper = styled.div`
  padding: 40px;

  ${media.tablet} {
    padding: 20px;
  }
`;

✅ 3. 공통 스타일 유틸 (mixins) 만들기

// styles/mixins.ts
import { css } from 'styled-components';

export const flexCenter = css`
  display: flex;
  justify-content: center;
  align-items: center;
`;

export const ellipsis = css`
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
`;
const CenteredBox = styled.div`
  ${flexCenter}
`;

🎯 핵심은 “스타일도 설계한다는 마인드”

  • 컴포넌트만 설계하지 말고, 스타일 구조도 설계해야 함
  • styled-components는 그냥 CSS를 컴포넌트로 감싸는 게 아니라, 스타일 시스템을 만들 수 있는 도구임
  • 공통 섹션 간격, 타이포그래피, 미디어쿼리, 버튼 스타일 등은 설계 후 컴포넌트화해서 재사용해야 진짜 이득

🧩 그럼 정리하면…

제대로 쓴 경우덜 효율적으로 쓴 경우
ThemeProvider로 전역 색상, 폰트 관리스타일 파일마다 색상/폰트 따로 적음
mixin 유틸로 자주 쓰는 스타일 추출매번 display: flex 반복 작성
media.ts로 반응형 미리 설정styled 내에서 @media 직접 반복 작성
재사용 가능한 스타일 컴포넌트 생성페이지마다 styled.div 따로 생성

Q.

이런..지난번 사용했던 건 아무 의미없이 styled-components를 사용했던 것 같아서 너무 아쉽다..
tailwind css 를 사용해서 props를 사용한 재사용 코드를 만드는 건 쉽게 느껴졌는데 styled-comoponents로 그런 코드를 만든다고 생각하니까 익숙하지 않아서 되게 어렵게 느껴지네. 내가 보내준 예시 코드에도 props를 충분히 활용하지 못한 것 같아 보이지?ㅠ


A.

완전 공감돼 😭
처음 styled-components 쓸 때는 "컴포넌트로 스타일을 나눈다" 정도만 생각하고 쓰다 보면,
재사용성이나 props 활용은 놓치기 쉬워.
네가 tailwind에서는 props 재사용이 익숙하게 느껴졌던 것도 className 기반이라 직관적으로 "조건부 스타일"을 제어하기 쉬워서 그렇고.

그런데 지금 말한 것처럼, 네가 보낸 VideoInfo 예시 코드에서도 실제로는 props를 더 잘 활용했으면 더 컴포넌트화할 수 있었을 포인트가 있어!


👀 예시 코드에서 props로 재사용 가능했던 부분

💡 1. MoreBtn 아이콘 회전
지금 이렇게 되어 있어:

<MoreBtn onClick={handleViewEpisodeNum}>
  <img
    src="..."
    alt={moreItem ? '더보기' : '접기'}
    style={{ transform: moreItem ? 'none' : 'rotate(180deg)' }}
  />
</MoreBtn>

→ styled-components에서 props를 활용하면 더 깔끔하게 분리 가능:

const ArrowImg = styled.img<{ isOpen: boolean }>`
  transform: ${({ isOpen }) => (isOpen ? 'none' : 'rotate(180deg)')};
`;

<MoreBtn onClick={handleViewEpisodeNum}>
  <ArrowImg
    isOpen={moreItem}
    src="..."
    alt={moreItem ? '더보기' : '접기'}
  />
</MoreBtn>

💡 2. 버튼들 공통 스타일링
TopBtns 안에 있는 여러 버튼들, 다 같은 크기/스타일인데 img 태그만 다르잖아?

그럼 이렇게 공통 IconButton 같은 styled 컴포넌트를 만들 수 있어:

const IconButton = styled.button`
  background-color: transparent;
  border: none;
  width: 68px;
  height: 68px;
  padding: 0;

  img {
    width: 100%;
    height: auto;
  }
`;

// 사용
<IconButton>
  <img src="..." alt="재생" />
</IconButton>

💡 3. strong, h2, p 등 Typography 통일 가능

const Title = styled.h2<{ size?: string }>`
  font-size: ${({ size }) => size || '25px'};
  font-weight: 600;
  line-height: 1.2;
`;

<Title size="18px">함께 시청된 콘텐츠</Title>

🧩 styled-components에서 props로 조건부 스타일 적용하는 법

const Box = styled.div<{ active?: boolean }>`
  background-color: ${({ active }) => (active ? 'blue' : 'gray')};
  padding: 10px;
`;

🎯 핵심은 "컴포넌트를 컴포넌트답게 만들기"

  • styled-components도 결국 컴포넌트야. props를 받아서 동적으로 스타일 바꾸게 만들 수 있음
  • 재사용할 수 있도록 만들고 나면 styled-components도 tailwind 못지않게 빠르게 스타일링 가능함
  • props + theme + mixin + media 이 네 가지를 적절히 활용하면 정말 강력해져



🌀 최종 회고와 개선 방향

📍 문제 인식

해당 프로젝트에서는 styled-components를 사용해 전체 스타일링을 진행했지만,
결과적으로는 재사용성과 확장성이 낮은 구조로 사용되었다는 아쉬움이 남았다.

예를 들어, 공통으로 사용되는 섹션 간 여백, 폰트 스타일, 버튼 디자인 등이 중복 작성되거나 새로운 스타일 파일로 분산되었고,
스타일이 일관되지 않게 흩어지는 현상이 발생했다.

🧩 문제 원인

  • styled-components의 props 기반 분기 스타일링, theme, mixin 등을 충분히 활용하지 못함
  • 프로젝트 초기에 공통 디자인 시스템이나 가이드라인이 없었던 점
  • 이전에 사용해본 Tailwind CSS와는 달리, styled-components는 재사용 구조를 직접 설계해야 한다는 점에서 익숙하지 않았음
  • 결과적으로 styled-components를 단순 CSS-in-JS 도구로만 사용하게 되었고, 진정한 장점을 살리지 못함

🔧 개선 방향 & 앞으로의 계획

  • 프로젝트 초기 단계에서

    • theme 객체로 색상, 폰트, 여백 단위 등 전역 변수 설정
    • GlobalStyle로 초기화 및 공통 스타일 선언
    • mixin으로 반복되는 레이아웃, 미디어쿼리 유틸 함수화

  • 반복적으로 사용되는 UI 요소들(버튼, 카드 등)은 다음과 같이 props 기반의 재사용 컴포넌트로 추상화할 예정

    <Button variant="primary" size="lg">재생</Button>

  • Tailwind에서 props 조합으로 스타일을 효율적으로 관리했던 경험을 기반으로,
    styled-components에서도 디자인 시스템을 구축하는 연습을 진행할 계획

✅ 정리

"styled-components를 쓴다는 것 자체보다, 얼마나 효율적이고 일관된 UI 구조로 설계했는지가 더 중요하다."

2차 팀 프로젝트 때는 명확한 스타일가이드를 가지고 tailwind css, scss를 사용해 공통으로 재사용할만한 변수들과 믹스인을 설정하고 시작해 훨씬 수월하게 느껴졌었다.
그 때의 경험을 되살려 styled-components도 컴포넌트라는 것을 인식하고 충분히 고민한 코드로 만들어보고 싶다.
가능하다면 스터디 응용 버전으로 react 코드를 구현할 때 styled-components를 사용해 직접 실천해보려고 한다.
마지막으로 styled-components를 제대로 써보고 싶은 분들에게 이 바닥부터 시작하는 회고가 도움이 되길 바랍니다 . . .



+ 번외

✨ 팁: styled-components 내부에 Tailwind 클래스 넣는 방법 (실험적으로 쓰기도 함)

import tw from 'twin.macro';

const PlayButton = styled.button`
  ${tw`bg-blue-500 text-white px-4 py-2 rounded-lg`}
`;

Twin.macro를 쓰면 styled-components 문법 + Tailwind utility를 함께 쓸 수 있어.

profile
랑
다음 포스트

prototype method(내장 api)

0개의 댓글