Styled Components 리액트 컴포넌트 스타일

Styled Components는 Javscript와 CSS를 결합하여 React 컴포넌트에 스타일을 적용하는 라이브러리

, CSS-in-JS 방식의 대표적인 예로, 스타일을 컴포넌트 단위로 관리할 수 있게 한다. 

 

1. 기본 개념 

Styled Components는 CSS 코드를 JavaScript 파일 안에 작성할 수 있게 해주는 라이브러리이다.

React 프로젝트에서 주로 사용된다. 

 

스타일이 컴포넌트에 국한되어 전역 네임스페이스 충돌을 방지한다. (Scoped styling) 

동적인 스타일링이 가능하다. (props나 상태에 따라 스타일 변경)

CSS를 별도 파일로 분리하지 않아도 되므로 유지보수가 편리하다. 

 

2. 기본 사용법 

먼저 Styled Components를 설치한다. 

 

npm install styled-components

 

사용은 아래와 같이 한다.

 

import styled from 'styled-components';

// 스타일이 적용된 컴포넌트 정의
const Button = styled.button`
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }
`;

function App() {
  return (
    <div>
      <Button>클릭하세요</Button>
    </div>
  );
}

export default App;

 

3. 장점 

1) 동적 스타일링: props를 활용해 조건부 스타일을 쉽게 적용할 수 있다. 

 

const Button = styled.button`
  background-color: ${props => props.primary ? '#007bff' : 'gray'};
  color: white;
`;

<Button primary>Primary 버튼</Button>
<Button>Default 버튼</Button>

 

2) 자동 벤더 프리픽스: 브라우저 호환성을 위해 자동으로 접두사를 추가해준다. 

 

3) 간편한 테마 관리 : ThemeProvider 를 사용해 전역 테마를 설정할 수 있다. 

 

const theme = {
  mainColor: '#007bff'
};

const Button = styled.button`
  background-color: ${props => props.theme.mainColor};
`;

<ThemeProvider theme={theme}>
  <Button>테마 버튼</Button>
</ThemeProvider>

 

4. 단점

러닝 커브 : CSS를 템플릿 리터럴로 작성하는 방식이 처음에 낯설다. 

번들 크기 : Styled Components 자체가 약간의 오버헤드를 추가할 수 있다. 

서버 사이드 렌더링(SSR) 설정이 약간 복잡할 수 있다. 

 

컴포넌트 기반으로 스타일을 관리하고 싶을 때, 

동적인 UI를 자주 다룰 떄, 

CSS 파일을 분리하지 않고 코드 가독성을 높이고 싶을 때 

Styled Components를 사용하면 좋다.