💥프로젝트를 진행하면서 사용한 스타일컴포넌트에 공부한 내용을 정리한 글로 잘못된 부분 더 나은 방법이 있으면 댓글로 남겨주세요.
본 포스팅에선 스타일 컴포넌트의 이론이라던가 CSS-in-JS, CSS-in-CSS가 무엇인지에 대해선 설명하지 않는다. 오로지 다른 프로젝트에서 활용할 수 있고 사용한 내용에 대해 정리한 내용이다.
스타일 컴포넌트를 사용하기 전에 우선 기초적인 설정이 필요하다. 이런 기본적인 설정을 해두면 반복되는 값에 대해 한 곳에서만 수정하면 되고 코드를 한결 간결하게 해준다.
// npm
npm install styled-components
// yarn
yarn add styled-components
본 포스팅과 관련없는 폴더, 파일은 생략한 기본 셋팅을 위해 사용되는 파일의 구조이다.
📦src
┣ 📁 style
┃ ┣ 📜 global.jsx
┃ ┣ 📜 theme.js
┗ 📜 App.jsx
global.jsx
에 프로젝트의 요소들의 기본적으로 적용될 스타일을 작성한다. 여기에 reset
과 추가적으로 태그에 지정할 스타일을 적어준다.
기본적인 스타일 설정을 적는다. 여기에 reset 스타일을 적어도 좋다.
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
html{ font-size: 62.5%; }
a{
text-decoration: none;
color: inherit;
}
body{
font-size: 1.6rem;
line-height: 1.4;
}
`
개인적인 reset 스타일을 적어도 좋지만 해당 라이브러리를 설치하여 사용할 수 있다.
npm i styled-reset
설치된 reset 스타일을 가장 상단에 적고 reset 외에도 적용할 기본 스타일을 작성한다.
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset'; // reset 스타일 import
const GlobalStyle = createGlobalStyle`
${reset}
html{ font-size: 62.5%; }
a{
text-decoration: none;
color: inherit;
}
body{
font-size: 1.6rem;
line-height: 1.4;
}
`
theme.js
에 프로젝트에 사용할 커스텀 스타일을 추가한다.
커스텀 스타일로는 ir기법이 담긴 CSS를 만들거나 프로젝트의 메인 색상처럼 반복적으로 사용되는 값을 저장하는 등 프로젝트에 사용되는 스타일을 추가하면 된다.
다크모드를 위한 색상도 여기서 작성하면 된다.
//ir 기법
const a11yHidden = () => {
return `
overflow: hidden;
position: absolute;
clip: rect(0, 0, 0, 0);
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
`;
};
// 반응형 사이즈 정의
const size = {
mobile: '(max-width: 390px)',
tablet: '(max-width: 1024px)',
};
// 라이트 모드에서 색상
const lightTheme = {
mainColor: '#2BC48A',
subColor: '#333843',
a11yHidden,
size,
}
// 다크 모드에서 색상
const darkTheme = {
mainColor: '#4AD295',
subColor: '#434B5A',
a11yHidden,
size,
}
// 객체로 해당 모드를 각각 담는다.
export default const theme = {
light: lightTheme,
dark: darkTheme,
};
만약 다크모드를 사용하지 않는다면 다음과 같이 작성하면 된다.
const a11yHidden = () => {
return `
overflow: hidden;
position: absolute;
clip: rect(0, 0, 0, 0);
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
`;
};
// 반응형 사이즈 정의
const size = {
mobile: '(max-width: 390px)',
tablet: '(max-width: 1024px)',
};
//색상 정의
const color = {
mainColor: '#4AD295',
subColor: '#434B5A',
}
export default const theme = {
a11yHidden,
size,
color,
};
<ThemeProvider theme={theme[mode]}>
를 통해 theme.js
에서 설정한 커스텀 스타일을 전역적으로 사용할 수 있다.mode
의 값을 light 또는 dark로 변경하여 라이트모드 또는 다크모드로 적용하면 된다.import React, { useState } from 'react';
import { ThemeProvider } from 'styled-components';
import theme from './style/theme';
import GlobalStyles from './style/global';
export default function App() {
const [mode, setMode] = useState('light');
return (
<>
<ThemeProvider theme={theme[mode]}>
<GlobalStyles />
</ThemeProvider>
</>
);
}
global.jsx
: reset 스타일과 기본적인 태그 스타일을 적는다.theme.js
: 프로젝트에서 반복적으로 사용되는 스타일, 값을 적는다.(다크모드 색상도 여기서 설정한다.)App.jsx
: ThemeProvider
로 작성한 스타일을 전역적으로 설정한다.이렇게 프로젝트에서 스타일컴포넌트를 사용하기 전 기본적인 셋팅을 해둔다. 다음 포스팅에서 이렇게 설정한 스타일을 사용하는 방법과 활용방법에 대해 적어보려한다.