[Css] styled-reset에 대하여

개인의 추측과 지식이 함께하는 글 입니다.
저의 추측이 잘못되었다면 댓글로 피드백 부탁드립니다!

1. styled-reset 이란?

Eric Meyer가 개발한 styled-components를 Reset CSS

2. 설치

npm i styled-reset
yarn add styled-reset

https://www.npmjs.com/package/styled-reset

3. 적용 방법

import { createGlobalStyle } from 'styled-components'

styled component의 createGlobalStyle를 이용해서

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

const GlobalStyle = createGlobalStyle`
    ${reset};
    a {
      text-decoration: none;
      cursor: pointer;
      color: inherit;
    }
`

위와 같이 글로벌하게 적용해서 사용할 수 있도록 해두었습니다.
src/styles/GlobalStyle.js에 위치해두었고
app.js에 import 하여 적용하였다.

스타일 reset 필요하다고 느끼는 부분은
제가 a 태그 작성 해둔 것 처럼 작성해두면 될 것 같다!

( 여담이지만... http://meyerweb.com/eric/tools/css/reset 에서 제공하는 reset 에 a 태그 같은 애들은 없었다..... ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ... ㅜㅜㅜㅜ
당연히.. reset에 포함될거라고 생각했는데....😭 그동안 reset이 제대로 안됐다고 생각했는데...😇 )

4. reset.css 로 적용해주면 되는데 왜 굳이 styled-reset을 적용했는가?🤔

위 코드에 나와있는 ${reset} 을 콘솔에 찍으면
다들 익숙하게 style.css 의 파일에 작성했던 (사실은 복붙하는...) 내용을 출력합니다.
여기서 알 수 있듯이 개발자가 관리할 부분이 줄어들 것이라 생각해서 styled-reset 을 사용하였습니다.