[typeScript] 타입스크립트로 styled-components 정복하기

타입스크립트를 사용하는 프로젝트를 진행중인데,
UI작업이 끝난 기념으로 타입스크립트로 styled-components를 어떻게 써야하는지에 대한 포스팅을 할 것 이다 :)

GlobalStyles 설정하기

• 스타일드 컴포넌트의 장점이라 할 수 있는 globalStyles를 적용하는 방법은 js를 사용할 때와 비슷하다.

1. src 하위에 GlobalStyles.tsx 파일을 만든다.
2. createGlobalStyle을 임포트한다.
3. 아래와 같이 전체 프로젝트에서 사용될 스타일을 넣어준다.
   예시)

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
* {
  box-sizing: border-box ;
}
html, body {
	height: 100%;
	font-size: 62.5%;
}
body {
  background-color: ${props => props.theme.backgroundGrey};
  max-width: 76.8rem;
  margin: 0 auto;
  margin-top:50px;
}
a {
  text-decoration: none;
	color:inherit;
}
`;
export default GlobalStyle;

• 태그가 엄청 많은 부분은 html 전체 태그를 초기화시켜주는 코드이고, 하단의 코드는 프로젝트에서 사용할 부분이다.

컬러 팔레트 사용하기

• 컬러팔레트는 styled-components에서 default theme를 정해놓고 변수명으로 불러 올 수 있는 기능인데,
  타입스크립트이기 때문에 먼저 변수들의 타입을 정의해줘야한다.

1. scr아래 styled.d.ts 파일을 만든다.
2. styled-components를 임포트하고 인터페이스를 정의해준다.
3. 예시 )

import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    mainRed: string;
    mainPink: string;
    mainOrange: string;
    mainYellow: string;
    mainPurple: string;
    backgroundGrey: string;
    mainWhite: string;
    mainBlack: string;
    mainGrey: string;
  }
}

• 새로운 색 혹은 변수명을 추가할 때마다 해당 파일에 변수명과 타입을 추가해줘야한다.

4. src아래 theme.ts 파일을 만들어준다.
5. 해당 파일에 DefaultTheme을 임포트하고 변수를 정의한다.
6. 예시 )

import { DefaultTheme } from 'styled-components';

export const defaultTheme: DefaultTheme = {
  mainRed: '#FF4949',
  mainPink: '#F7A9A9',
  mainOrange: '#FF8D29',
  mainYellow: '#FFCD38',
  mainPurple: '#541690',
  backgroundGrey: '#f2f2f2',
  mainWhite: '#FFFDFD',
  mainBlack: '#333333',
  mainGrey: '#bdc3c7',
};

export default defaultTheme;

• 이렇게 설정해놓은 색 변수명은
  color: ${props=>props.theme.mainBlack};
  와 같이 쓸 수 있다.
• defaultTheme에 변수를 설정해주었기 때문에 theme에서 접근을 해줘야한다.

styled-components에서 props 사용하기

props가 한개 일 때

• const ComponentsName = styled('div')<{isActive : boolean}>와 같은 형식으로 사용한다.
• styled.div 대신 styled('div')로 사용하고 그 뒤에 타입을 정의해주면 된다.
• 예시 )

export const LoginSubmitButton = styled('button')<{ isActive: boolean }>`
  width: 100%;
  height: 48px;
  background-color: ${props =>
    props.isActive ? props.theme.mainRed : props.theme.mainGrey};
  border: 0;
  border-radius: 12px;
  margin-top: 20px;
  color: ${props =>
    props.isActive ? props.theme.mainWhite : props.theme.mainBlack};
`;

• 변수를 불러오는 방법은 ${props=>props.변수}로 사용하면 된다.
• 위의 예시에서는 프롭스의 상태에 따라 색이 바뀌도록 삼항연산자를 사용했다.
• 컴포넌트에서는 프롭스를 주는 방식과 마찬가지로 사용하면된다.

<LoginSubmitButton
          type="submit"
          isActive={isActive}/>

프롭스가 여러개일 때

• 최상단에 interface로 타입들을 정의한 다음에 사용할 수 있다.
• 예시)

interface SubmitStyled {
  isActive: boolean;
  isError:boolean;
}

• 물론 인라인 방식도 여러개의 타입을 정의할 수 있지만,
  이번 프로젝트에서 우리가 정한 린트는 타입이 하나일 때만 인라인을 쓰고, 그 외에는 따로 타입을 정의해서 사용하기로 했다.
• 위와같이 정의한 interface는 아래와 같이 사용해주면 된다.
• 예시 )

export const LoginSubmitButton = styled('button')<SubmitStyled>`
  width: 100%;
  height: 48px;
  background-color: ${props =>
    props.isActive ? props.theme.mainRed : props.theme.mainGrey};
  border: 0;
  border-radius: 12px;
  margin-top: 20px;
  color: ${props =>
    props.isError ? props.theme.mainRed : props.theme.mainBlack};
`;

• 따로 정의를 하는 경우에도 컴포넌트 사용법은 똑같다. 정의한 타입대로 프롭스를 주면 된다.

<LoginSubmitButton
          type="submit"
          isActive={isActive}
          isError = {isError}
          />

styled-components로 FontAwesomeIcon 꾸미기

1. 아래 두줄을 임포트 해준다.

import styled from 'styled-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

2. 아래와 같은 방식으로 아이콘 스타일을 입힌다.

const ComponentsName = styled(FontAwesomeIcon) `
font-size:24px;
color:${props=>props.theme.mainRed};

3. 컴포넌트가 있는 파일에서 원하는 이모티콘을 임포트하고 아래와 같이 사용한다.

import { faPencil } from '@fortawesome/free-solid-svg-icons';

{....}

<ComponentName icon={faPencil} />