[React] TypeScript 프로젝트에 Reset CSS 적용하기

해당 글은 프론트엔드를 공부하면서 기록 목적으로 작성한 내용입니다.
잘못된 내용이 있다면 제보 부탁드립니다. 🙇‍♂️

이번에 웹접근성과 UI 설계법을 공부하면서 TypeScript를 적용한 React 프로젝트에서 Reset CSS를 적용하는 방법을 기록하고자 한다.

1. Reset CSS 란?

• 웹 브라우저마다 기본으로 적용되는 스타일이 지정되어 있어, 브라우저 간의 요소들의 차이를 없애 동일한 스타일이 적용되도록 초기화하는 방법을 말한다.

2. 프로젝트 준비하기

• 먼저, 타입스크립트를 세팅한 React 프로젝트를 준비한다.

  yarn create react-app 프로젝트명 --template typescript  

3-1. styled-reset 사용하기

• 첫번째로는 styled-reset 라이브러리를 사용하여 간편하게 스타일을 초기화 할 수 있는 방법이다.

  yarn add styled-reset

• 아래 첨부 자료와 같이 h1 태그를 사용하였음에도 스타일이 초기화된 것을 볼 수 있다.

  //App.tsx
  ...
  import { Reset } from 'styled-reset'
  
  const App = () => (
    <>
      <Reset />
      <h1>이것은 제목이다.</h1>
    <>
  )

  

3-2. GlobalStyle 사용하기

• 두번째 방법은 styled-components 라이브러리를 통해 GlobalStyle을 만들어 스타일을 초기화 시키는 방법이다.

  yarn add styled-components @types/styled-components

• 이번에는 CSS 초기화 뿐만 아니라 추후 다크모드 사용까지 고련한 방법에 대한 코드를 기록해본다.

Reset CSS 코드
https://meyerweb.com/eric/tools/css/reset/

//index.tsx
...
import { ThemeProvider } from "styled-components";
import { theme } from "./theme";

...
root.render(
  <>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </>
);

//theme.ts
import "styled-components";
declare module "styled-components" {
  export interface DefaultTheme {
    textColor: string;
    bgColor: string;
    accentColor: string;
  }
}

//styled.d.ts
import { DefaultTheme } from "styled-components";

export const theme: DefaultTheme = {
  bgColor: "#2f3640",
  textColor: "#f5f6fa",
  accentColor: "#4cd137",
};

//App.tsx
...
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, menu, 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,
  main, menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }

  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure,
  footer, header, hgroup, main, menu, nav, section {
    display: block;
  }

  /* HTML5 hidden-attribute fix for newer browsers */
  *[hidden] {
    display: none;
  }

  body {
    line-height: 1;
  }

  menu, 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;
  }

  //style custom
  * {
    box-sizing: border-box;
  }

  body {
    font-family: 'Source Sans Pro', sans-serif;
    background-color: ${(props) => props.theme.bgColor};
    color: ${(props) => props.theme.textColor}
  }

  a {
    text-decoration: none;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <h1>Reset CSS 와 Theme를 적용한 방법이다.</h1>
    </>
  );
}

export default App;

4. 마무리하며...

• Reset CSS 와 다크 모드(theme) 방법을 다시 공부하며, 기존에 프로젝트에서 컴포넌트 하나하나 일일이 props로 스타일을 적용했던 방법이 비효율적이었단 것을 사뭇 느끼게 되었다.
  이렇게 새로운 지식을 공부할 때마다 재미있고, 기존 프로젝트를 리팩토링 해야겠다는 생각이 든다.
  오늘 공부한 방법을 잊지 않도록 기록을 남기며 이만 마무리한다.

참고: 노마드 코더 - React JS 마스터클래스
https://nomadcoders.co/react-masterclass