[react] 스타일드 컴포넌트(styled components)

styled-components

---

1. Styled-components?

styled-components는 react와 react-native에서 스타일을 적용하는 데 사용되는 라이브러리입니다.

styled-components 없이 전통적인 CSS 방식(css 혹은 scss 임포트)으로 애플리케이션에 스타일을 적용하면 코드의 일관성을 유지하기 어렵고, 의존성과 글로벌 네임스페이스의 관리가 복잡해집니다.

styled-components는 이러한 문제를 해결하기 위해 등장했으며 컴포넌트 단위로 스타일을 캡슐화하여 모듈화 및 재사용성을 높여줍니다.

 

 

2. 전통 CSS와 다른 점

2-1. CSS-in-JS

styled-component는 CSS-in-JS 방식으로 작동합니다.

CSS-in-JS는 CSS를 JavaScript 파일 내에 작성하는 패러다임입니다.

JavaScript  파일 안에서 코드를 전부 제어할 수 있기 때문에 JavaScript와 CSS파일을 계속 오가며 개발할 필요가 없습니다. 또한 JS의 동적 기능을 활용하여 더 빠르고 유연한 스타일링을 가능하게 합니다.

 

2-2. Tagged Template Literals

styled-components는 JavaScript의 Tagged Template Literals를 사용하여 스타일을 선언합니다.

Tagged Template Literals를 선언하기 위해서는 키보드 숫자 1 왼쪽에 있는 백틱(`)이 사용됩니다.

백틱 안에서 CSS 코드를 직접 작성할 수 있게 해 주며, 이를 통해 로직과 스타일의 관리가 훨씬 깔끔해집니다.

const Button = styled.button`
  background: white;
`;

2-3. 컴포넌트 단위의 스타일 캡슐화

styled-components를 사용하면 각 컴포넌트에 대한 스타일이 독립적으로 캡슐화되어, 다른 컴포넌트의 스타일에 영향을 주지 않습니다. 따라서 컴포넌트 간에 스타일 충돌을 방지하고, 코드의 모듈성을 높일 수 있으며, 개발 생산성도 크게 증가합니다.

 

 

3. 설치 및 기본 사용법

3-1. 설치하기

npm을 통해 설치해 줍니다.

npm install styled-components

 

설치가 완료되면, styled-components를 불러와서 스타일이 적용된 React 컴포넌트를 만들 수 있습니다.

import styled from 'styled-components';

// 버튼 컴포넌트 생성
const StyledButton = styled.button`
  background-color: #4CAF50;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
`;

// 컴포넌트 사용
function App() {
  return <StyledButton>Click Me</StyledButton>;
}

 

3-2. props 기반의 동적 스타일링

styled-components가 개발자들에게 인기 있는 가장 큰 이유는 props를 통한 동적 스타일링이 가능하기 때문입니다.

컴포넌트의 props에 따라 스타일을 즉시 변경할 수 있습니다.

const Button = styled.button`
  background: ${props => props.primary ? 'navy' : 'gray'};
  color: ${props => props.primary ? 'white' : 'black'};
  // 추가 스타일링...
`;

<Button primary>Primary</Button>
<Button>Default</Button>

 

3-3. 글로벌 스타일 설정

컴포넌트별로 모듈화 된 스타일을 구현하게 해 주지만, 당연히 글로벌 스타일도 설정할 수 있습니다.

createGlobalStyle를 활용하여 전역 스타일을 정의합니다. 이후에는 루트 레벨에서 GlobalStyle 컴포넌트를 렌더링 해주어야 합니다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    font-family: 'Arial', sans-serif;
    // 기타 전역 스타일...
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <YourComponent />
    </>
  );
}

 

3-4. 테마

테마 기능을 사용하여 애플리케이션 전체의 색상, 글꼴 크기 등을 통일하고, 스타일 기준을 쉽게 변경할 수 있습니다.

ThemeProvider를 활용하여 루트레벨에서 감싸줍니다.

import { ThemeProvider } from 'styled-components';

const theme = {
  primaryColor: 'blue',
  secondaryColor: 'green',
  // 추가 테마 속성...
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <YourComponent />
    </ThemeProvider>
  );
}

 

 

4. 장단점 정리

4-1. 장점

• JS에서 로직에 따라 직관적인 UI 구현이 가능합니다.
• 모듈성 및 재사용성이 높습니다.
• 유지보수(확장성 및 유연성) 또한 높습니다.

4-2. 단점

• CSS-in-JS에 익숙하지 않은 개발자들에게는 러닝커브가 있을 수 있습니다.
• 웹팩의 설정이 적절하게 되어있지 않으면 최종번들 크기가 증가할 수 있습니다.
• 서버 사이드 렌더링 설정이 복잡해질 수 있습니다.