📌 styled-components 정리!

React에서 컴포넌트를 만들다 보면 스타일을 따로 .css 파일에 작성하고,

클래스 이름을 주고, 관리하고... 생각보다 귀찮고 헷갈릴 때가 많다.

이럴 때 styled-components를 사용하면,

CSS도 컴포넌트처럼 만들어서 코드 안에서 바로 스타일을 줄 수 있어서 훨씬 편하고 직관적이다.

 

styled-components를 처음 설치하는 방법부터, 실제로 사용하는 방식,

props를 통한 커스터마이징, 전역 스타일 설정, 재사용까지 전부 정리해보았다.

1️⃣ styled-components 설치 방법

styled-components는 React에서 스타일을 편하게 줄 수 있는 라이브러리임.

CSS를 컴포넌트처럼 만들 수 있어서 유지보수가 쉬움.

npm install styled-components

 

만약 TypeScript를 같이 쓴다면 타입도 설치해줘야 함

npm install --save-dev @types/styled-components

 

설치가 완료되면 package.json에 styled-components가 생겨 있어야 함.

 

2️⃣ styled-components 기본 문법

기존에는 .css 파일을 만들어서 클래스 이름을 따로 줬어야 했지만,

styled-components를 쓰면 JavaScript 안에서 바로 스타일을 줄 수 있음.

const BluButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 4px;
  margin: 10px;
`;

const BigBlueButton = styled(BluButton)`
  width: 300px;
  padding: 20px;
`;

 

이렇게 하면 BluButton이 파란 버튼, BigBlueButton은 더 큰 버튼이 됨.

3️⃣ props를 활용한 스타일링

props를 이용하면 컴포넌트에 따라 스타일을 다르게 줄 수 있음.

const PropsButton = styled.button`
  background-color: ${(props) => props.backgroundColor || 'white'};
  color: ${(props) => props.textColor || 'black'};
  padding: ${(props) => props.padding || '0'};
  border-radius: ${(props) => props.radius || '0'};
  margin: ${(props) => props.margin || '0'};
  width: ${(props) => props.width || 'auto'};
  font-size: ${(props) => props.fontSize || 'auto'};
  font-weight: ${(props) => props.fontWeight || 400};
`;

 

<PropsButton 
  backgroundColor="blue"
  textColor="white"
  padding="10px"
  radius="4px"
  margin="10px"
>
  파란 버튼
</PropsButton>

 

이렇게 하면 원하는 스타일로 버튼을 다양하게 만들 수 있음.

4️⃣ 전역 스타일 설정하기

모든 페이지에 적용되는 스타일은 전역(Global) 스타일로 한 번에 설정할 수 있음.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  input {
    width: 90%;
  }
  span {
    color: green;
    &:hover {
      background-color: white;
    }
  }
`;

 

App 컴포넌트 안에 <GlobalStyle />을 넣으면 전체 적용됨.

5️⃣ 스타일을 재사용하는 법

비슷한 스타일을 여러 번 쓰면 코드가 길어짐. 그럴 땐 공통 스타일을 따로 빼서 써주면 됨.

import { css } from 'styled-components';

export const flexMixin = ({
  direction = 'row',
  align = 'stretch',
  justify = 'start',
  gap = 0,
  wrap = 'nowrap'
}) => {
  return css`
    display: flex;
    flex-direction: ${direction};
    align-items: ${align};
    justify-content: ${justify};
    gap: ${gap};
    flex-wrap: ${wrap};
  `;
};

export const gap_padding_radius = '20px';

 

그리고 쓰고 싶은 컴포넌트에서 아래처럼 사용

import { flexMixin, gap_padding_radius } from './styled';

const StyledMain = styled.main`
  padding: ${gap_padding_radius};
  ${flexMixin({ align: 'flex-start', wrap: 'wrap' })};
`;

 

이렇게 하면 공통 스타일을 편하게 재사용할 수 있음.

📊 styled-components의 장단점

👍 장점

• CSS도 컴포넌트처럼 쓸 수 있어서 코드가 깔끔해짐
• JS 코드 안에서 CSS를 쓸 수 있어서 편함
• 클래스 이름을 자동으로 만들어줘서 충돌이 안 생김

👎 단점

• 기존 CSS보다 개념이 조금 어려워서 공부가 필요함
• 자동으로 만들어지는 클래스 이름이 보기 안 좋을 수도 있음
• 스타일도 JS 안에 있으니 JS 파일 용량이 커질 수 있음