WEB/React
styled-components를 활용하여 일관된 디자인 시스템을 구축하기
hatso
2024. 1. 10. 23:32
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를 접했을 때는 엉망으로 사용했었는데 공부를 계속하다 보니 속성 값을 변수처럼 가져다가 사용하는 방법을 알게 되었고, 개발과정이 체계화되어간다는 느낌을 받아 스스로 뿌듯함을 느꼈던 경험이 있습니다.