[ Styled-Component ] CSS 초기화

CSS 초기화가 필요한 이유

웹 브라우저마다 기본적으로 스타일이 적용되어 있다. 

개발 중인 프로젝트가 각 브라우저마다 동일하게 보여지기 위해선 CSS 초기화가 필요하다.

 

Styled Component & styled-reset

styled-component와 styled-reset을 사용하여 CSS 초기화를 할 수 있다.

먼저 styled-component와 styled-reset 패키지를 install한다.

npm install styled-component styled-reset

 

CreateGlobalStyle

styled-component에서 개별 컴포넌트가 아닌 모든 컴포넌트에 동일한 스타일을 적용하고 싶을 경우 createGlobalStyle를 통해 적용이 가능하다. 

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

export const GlobalStyle = createGlobalStyle`
  ${reset}
`

 

App.js에 적용하기

import React, { Fragment } from 'react'
import { GlobalStyle } from './style/globalStyle'
import Home from './pages/Home'

function App() {
  return (
    <React.Fragment>
      <GlobalStyle />
      <Home />
    </React.Fragment>
  )
}

export default App