Styled Components를 사용한 이유

이번 프로젝트에서는 다양한 CSS 스타일링 기법 중 Styled Components를 선택해 사용하였습니다. 특정 기술이 더 우수해서라기보다는, 한 번도 써보지 않은 기술을 직접 경험해보고, 장단점을 체감하며 앞으로의 프로젝트에서 기술 선택에 참고하기 위해 도입하게 되었습니다.

Styled Component란?

간단히 말해, Styled Components는 기존에 별도의 .css 파일로 분리해 관리하던 스타일을 컴포넌트 내부에서 함께 정의할 수 있도록 해주는 CSS-in-JS 기법입니다.

다시 말해, HTML(또는 JSX) 구조와 CSS 스타일이 한 파일 안에 함께 존재하게 되므로, 기존 방식대로 관심사를 파일 단위로 분리하던 사람들에게는 다소 낯설게 느껴질 수 있습니다. 저 역시 처음에는 거부감이 있었던 것이 사실입니다.

하지만 관점을 조금 다르게 보면, Styled Components 역시 관심사를 분리하는 기법입니다. 기존에는 “역할”을 기준으로 HTML, CSS, JS 파일로 나누었다면, Styled Components는 컴포넌트 단위로 기능과 스타일을 함께 묶어 관심사를 분리하는 방식이라 볼 수 있습니다. 분리의 기준이 다를 뿐이지, 개념 자체는 동일합니다.

✅ Styled Components의 장점

컴포넌트 기반 스타일링이 가능해 유지보수가 쉽고, 코드의 가독성이 높아집니다.
스타일이 해당 컴포넌트 범위에만 적용되어 스타일 충돌을 방지할 수 있습니다.
조건부 스타일링이나 동적 스타일 변경이 편리합니다.
스타일을 선언적으로 작성할 수 있어 목적이 명확하게 드러납니다.
빌드시 최적화된 CSS가 생성되어 결과적으로 번들 크기를 줄이는 데 도움이 됩니다.

❗ 단점도 있습니다

SSR(서버 사이드 렌더링) 환경에서는 사용이 다소 복잡하고, 초기 로딩 성능에 영향을 줄 수 있습니다.
JavaScript가 비활성화된 환경에서는 스타일이 적용되지 않을 수 있습니다.
별도의 빌드 과정이 필요하기 때문에 빌드 시간이 늘어날 수 있습니다.
프로젝트가 커질수록 스타일 구조가 복잡해질 수 있으며, 스타일 일관성을 유지하기 위한 별도 전략이 필요할 수 있습니다.

Styled Components 사용법

설치

Styled Components는 별도의 패키지이기 때문에 아래 명령어로 설치해야 합니다.

$ npm install styled-components

사용 방법

컴포넌트 상단에서 다음과 같이 styled를 import합니다.

import styled from 'styled-components';

그리고 아래처럼 백틱(``) 안에 CSS 문법을 작성하여 스타일을 정의합니다.

const StyledComponent = styled.div`
  background-color: lightgray;
  padding: 16px;
`;

JSX 내부에서 일반 컴포넌트를 쓰듯 사용하면 됩니다:

function Component() {
  return <StyledComponent />;
}

props를 활용한 조건부 스타일링

Styled Components에서는 props를 통해 조건에 따라 스타일을 다르게 적용할 수 있습니다.

const StyledComponent = styled.div`
  color: ${({ isActive }) => (isActive ? 'black' : 'red')};
`;

function Component() {
  return <StyledComponent isActive={true} />;
}

가상 클래스 및 className 사용

기존 CSS처럼 가상 클래스나 클래스 이름을 활용한 스타일링도 가능합니다.

const StyledComponent = styled.div`
  &:focus {
    outline: 2px solid blue;
  }

  &.highlight {
    background-color: yellow;
  }
`;

느낀 점

Styled Components를 사용하면서 가장 좋았던 점은 스타일 충돌에 대한 걱정이 전혀 없었다는 것입니다. 실제로 프로젝트를 진행하는 동안 클래스 이름이 겹치거나, 다른 사람이 작성한 코드와 스타일이 충돌하는 일을 전혀 겪지 않았습니다.

하지만 아쉬운 점도 있었습니다. 아래와 같은 코드 구조를 보면,

function PostIdMessage() {
  return (
    <>
      <Header />
      <Container>
        <Section>
          <SectionTitle />
          <InputBox />
        </Section>
        <Section>
          <SectionTitle />
          <SelectBox />
        </Section>
        <Section>
          <SectionTitle />
          <QuillEditor />
        </Section>
        <Button />
      </Container>
    </>
  );
}

이 코드에는 공용 컴포넌트와 Styled Component가 섞여 있는데, 어떤 컴포넌트가 어떤 스타일 방식으로 작성되었는지 한눈에 알기 어렵습니다. 특히 컴포넌트의 스타일이나 props를 수정해야 할 때는, 원본 파일을 찾아가며 확인하는 일이 자주 발생했습니다. 이는 생산성에 다소 영향을 줄 수 있겠다는 생각이 들었습니다.

결론

Styled Components는 분명 강력하고 유연한 스타일링 도구입니다. 특히 작은 규모의 프로젝트나 팀 내 스타일 충돌을 방지하고자 할 때 유용했습니다. 다만, 스타일과 기능이 뒤섞인 구조는 호불호가 갈릴 수 있고, 유지보수 시 불편함이 생길 여지도 있다는 점은 고려해야 할 요소입니다.

다음 프로젝트에서도 사용할지는 아직 고민 중입니다. 새로운 기술을 체험한 것만으로도 충분히 의미 있었던 선택이었고, 앞으로 어떤 방식이 우리 팀에 더 잘 맞는지 판단하는 데에 중요한 경험이 되었다고 생각합니다.