styled-components 초기 세팅

스타일 통일의 필요성

첫 프로젝트에서 styled-components를 사용하면서, 일관된 규칙 없이 css 속성값을 사용했던 것이 가장 아쉬웠습니다. (예를 들어 같은 색상을 사용하기 위해 매번 다른 컴포넌트에서 값을 복사해서 붙여넣는다든지, rem 단위에 대한 이렇다할 규칙이 없어서 소수점 단위로 바꿔가며 적당한 크기를 찾는다든지...)

그래서 스타일을 좀 더 일관성있게 사용해야 한다는 필요성을 크게 느꼈고, 메인 프로젝트에서는 styled-reset, GlobalStyles, Theme 이 세 가지를 도입해야 겠다고 생각했습니다.styled-components를 사용할 때 일관된 스타일 규칙을 정하거나 개발자가 의도하지 않은 스타일을 제거해주는 등 스타일에 대한 초기 세팅을 도와줄 수 있습니다.

⭐️ 1. styled-reset

• styled-reset은 브라우저의 기본 스타일을 초기화해주는 패키지입니다.

설치

npm i styled-reset

사용법

• 아래에서 설명할 GlobalStyles에 ${reset}과 같이 적용해줍니다.

• 따라서 사용법은 아래 GlobalStyles 예제에서 함께 확인할 수 있습니다.

⭐️ 2. GlobalStyles

• 모든 컴포넌트에 동일하게 적용할 스타일을 지정해줄 수 있습니다.

설치

• styled-components를 설치했다면 별도의 설치 없이 바로 사용가능합니다.

사용법

• 글로벌 스타일(전역 스타일)을 생성하는 함수인 createGlobalStyle을 불러옵니다.

• 글로벌 스타일을 정의하고 컴포넌트를 생성합니다. 그다음 외부에서 사용할 수 있도록 export해줍니다.

• 아래와 같이 작성해줄 수 있습니다.

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

const GlobalStyles = createGlobalStyle` 
${reset}

* {
	box-sizing: border-box;
}
    
body {
	font-family: apple-system, 'Open Sans', sans-serif;
}

ol, ul {
	list-style: none;
}

a{
	text-decoration: none;
	color: inherit;

	&:hover {
    	text-decoration: none;
		color: none;
	}
    
	&:active {
    	text-decoration: none;
		color: black;
	}
        
    &:visited {
    	text-decoration: none;
		color: black;
	}
        
	&:link {
    	text-decoration: none;
		color: black; 
	}
}
`;

export default GlobalStyles;

• App.js에서 글로벌 스타일을 적용하기 위해 GlobalStyles 컴포넌트를 불러와 사용합니다.

// 📂 src/App.js

import GlobalStyles from './styles/GlobalStyles';

function App() {

  return (
      <>
        <GlobalStyles />
      </>
  );
}

export default App;

⭐️ 3. Theme

• 폰트 사이즈나 생 등의 속성값을 미리 변수로 정해 사용하는 경우가 많은데, 이를 위해 styled-components에서는 ThemeProvider라는 컴포넌트를 제공합니다.

설치

• styled-components를 설치했다면 별도의 설치 없이 바로 사용가능합니다.

사용법

• theme.js 라는 파일을 만들고 전역 변수를 만들어줍니다.

• 우선 예시로 폰트 사이즈와 길이, 색상에 대한 변수를 정해보겠습니다.
  

// 📂 src/styles/theme.js

// 대부분의 웹 브라우저에서 루트 요소의 폰트 사이즈는 16입니다.
// rem은 이러한 루트 요소의 폰트 사이즈를 1rem으로 하는 상대 단위이므로 16으로 나누어 표현할 수 있습니다.

// 함수를 사용해 값을 계산할 수 있습니다.
const calRem = (size) => `${size / 16}rem`;

// 폰트 사이즈에 대한 변수를 객체에 담아서 사용할 수 있습니다.
const fontSize = {
  xs: calRem(12), // 0.75rem
  sm: calRem(14), // 0.875rem
  md: calRem(16), // 1rem
  lg: calRem(18), // 1.125rem
  xl: calRem(20), // 1.25rem
  // 값을 사용하는 용도에 맞춰 이름을 지정해줄 수도 있습니다.
  subTitle: calRem(24) // 1.5rem;
  title: calcRem(36), // 2.25rem;
};

// 길이에 대한 변수를 객체에 담아서 사용할 수 있습니다.
const length = {
  // 단위를 간단하게 사용하고 싶으면 연산값이 아니라 바로 지정해줄 수도 있습니다.
  xs: '0.5rem',
  sm: '1.0rem',
  md: '1.5rem',
  lg: '2.5rem',
  xl: '3.5rem',
};

// 색상에 대한 변수를 객체에 담아서 사용할 수 있습니다.
const color = {
  brandColor: '#5CC6BA',
  subText: '#bababc',
  black: '#17202A',
  white: '#FDFEFE',
  blue: '#3498DB',
  transparentBrandColor: 'rgba(92, 198, 186, 0.1)',
  transparentBackground: 'rgba(0, 0, 0, 0.1)',
};

// 각각의 객체들을 theme이라는 하나의 객체로 묶어서 export합니다.
const theme = { fontSize, length,  color};

export default theme;

• 최상위 컴포넌트(여기서는 App 컴포넌트)를 ThemeProvider로 감싸 theme를 공급해줍니다.

// 전역 변수를 컴포넌트 전체에 공급해줄 ThemeProvider를 불러옵니다.
import { ThemeProvider } from "styled-components";
// 아까 만든 theme 객체를 불러옵니다.
import theme from "./theme.js";

function App() {

  return (
    <>
      <ThemeProvider theme={theme}>
      	<GlobalStyle />
        /* 다른 컴포넌트 */
      </ThemeProvider>
     </>
  );

• theme 사용은 요렇게!

const Button = styled.button`
  background-color: ${({theme}) => theme.color.yellow}
`