styled-components를 활용하여 일관된 디자인 시스템을 구축하기

Theme 정의하는 방법

테마 객체를 만들어 일관성 있는 디자인 시스템을 구축하는 방법입니다.

유지보수가 용이하며, 생산력을 높여줄 수 있는 방법입니다.

// theme.js
export const theme = {
  colors: {
    primary: '#3498db',
    secondary: '#2ecc71',
    text: '#333',
    background: '#ecf0f1',
  },
  spacing: {
    small: '8px',
    medium: '16px',
    large: '24px',
  },
};

// App.js
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { theme } from './theme';
import MyStyledComponent from './MyStyledComponent';

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <MyStyledComponent />
      {/* 다른 컴포넌트들 */}
    </ThemeProvider>
  );
};

export default App;

사용 예시

// MyStyledComponent.js
import styled from 'styled-components';

const MyStyledComponent = styled.div`
  background-color: ${props => props.theme.colors.background};
  color: ${props => props.theme.colors.text};
  margin: ${props => props.theme.spacing.medium};
`;

export default MyStyledComponent;

 

처음 css를 접했을 때는 엉망으로 사용했었는데 공부를 계속하다 보니 속성 값을 변수처럼 가져다가 사용하는 방법을 알게 되었고, 개발과정이 체계화되어간다는 느낌을 받아 스스로 뿌듯함을 느꼈던 경험이 있습니다.