[React] styled-components 의 GlobalStyle 사용하기

 

 

 

styled-components 패키지의

createGlobalStyle 사용하기

 

 

 

React를 사용하다 보면 보통 스타일 속성을 컴포넌트 안에서 설정하기 때문에

기본적으로 세팅하는 속성들은 각 컴포넌트마다 중복으로 작성해야 하는 경우가 많다.

이럴 경우 한 컴포넌트 안에서의 코드 양이 길어지고 많아지며 전체적인 가독성이 떨어진다는 단점이 있다.

 

프로젝트에 공통으로 사용하는 폰트 스타일이나,

box-sizing, button이나 input의 outline과 border 속성, cursor 등 

기본적으로 컴포넌트마다 설정해주는 속성들은 GlobalStyle로 적용하면 컴포넌트별 중복 작성을 막아줄 수 있다.

 

---

 

 초기 세팅 

사용하고 있는 패키지 매니저에 따라 아래와 같이 styled-reset과 styled-components 패키지를 설치한다.

npm install styled-reset styled-components
yarn add styled-reset styled-components

 

 

 

 createGlobalStyle() 생성 

GlobalStyle.js 파일을 생성하여 아래와 같이 createGlobalStyle() Hook 으로 모든 컴포넌트에 적용할 속성들을 설정한다.

/* GlobalStyle.js */

import { createGlobalStyle } from 'styled-components'
import reset from 'styled-reset'

const GlobalStyle = createGlobalStyle`
${reset};

*, *::before, *::after {
  box-sizing : border-box;
}

body {
  color: #111;
  font-family: -apple-system,BlinkMacSystemFont,San Francisco,Helvetica Neue,Helvetica,Ubuntu,Roboto,Noto,Segoe UI,Arial,sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}

input {
  outline: none;
}

input:focus {
  outline: none;
  border: none;
}

button {
  cursor: pointer;
  outline: none;
  border: none;
  background-color: #FFF;
}

a {
  cursor: pointer;
}

`

export default GlobalStyle

 

 

 

 GlobalStyle.js 적용하기 

프로젝트를 실행하는 어플리케이션 파일에서 GlobalStyle.js 파일을 임포트한 후

최상위 컴포넌트로 추가하면 하위의 모든 컴포넌트에 GlobalStyle.js 내의 스타일 속성들이 적용된다.

import React from 'react'
import { Route } from 'react-router-dom'
import Login from '../pages/Login'
import Join from '../pages/Join'
import Detail from '../pages/Detail'
import Edit from '../pages/Edit'
import Main from '../pages/Main'
import Sub from '../pages/Sub'
import Upload from '../pages/Upload'
import Mypage from '../pages/Mypage'
import { ConnectedRouter } from 'connected-react-router'
import { history } from '../redux/configureStore'
import GlobalStyle from './GlobalStyle'

function App() {
  return (
    <>
      <ConnectedRouter history={history}>
        <GlobalStyle/>
        <Route path="/" exact component={Main}/>
        <Route path="/sub/:tag" exact component={Sub}/>
        <Route path="/login" exact component={Login}/>
        <Route path="/join" exact component={Join}/>
        <Route path="/detail/:id" exact component={Detail}/>
        <Route path="/edit/:id" exact component={Edit}/>
        <Route path="/upload" exact component={Upload}/>
        <Route path="/mypage/:nickname" exact component={Mypage}/>
      </ConnectedRouter>
    </>
  )
}

export default App