react-reset이란?

react-rest이란?

  : 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.js 패키지

     

     → 브라우저 간의 스타일 호환성 맞춤

 

---

적용 방법

• npm

npm i styled-reset

• yarn

yarn add styled-reset

---

styled-component 버전에 따른 사용 방법

• styled-component 4.x || 5.x

import * as React from 'react'
import { Reset } from 'styled-reset'

const App = () => (
  <React.Fragment>
    <Reset />
    <div>Hi, I'm an app!</div>
  </React.Fragment>
)

import * as React from 'react'
import { createGlobalStyle } from 'styled-components'
import reset from 'styled-reset'

const GlobalStyle = createGlobalStyle`
  ${reset}
  /* other styles */
`

const App = () => (
  <React.Fragment>
    <GlobalStyle />
    <div>Hi, I'm an app!</div>
  </React.Fragment>
)

export default App

• styled-component 3.x

import { injectGlobal } from 'styled-components'
import reset from 'styled-reset'
//import { reset } from 'styled-reset'

injectGlobal`
  ${reset}

→ reset은 두가지 방법(주석도 가능)으로 import 가능

---

react-reset을 사용하는 이유는?

 1) 궁극적으로 크로스 브라우징을 위해서!

 2) styled-component 사용시 전역적인 스타일 관리가 되지 않기 때문에

 

크로스 브라우징이란?

 : 웹 사이트를 접속했을 때 어느 한쪽에만 최적화됨을 막기 위해 공통 요소를 사용해 제작하는 것

---

관련된 내용은 해당 링크 참고하기!