온보딩코스중 기업과제를 시작했다. 프로젝트 초기 셋업중 CSS의 초기 값이 브라우저마다 약간의 차이가 있기때문에 초기화를 시켜주는 과정을 진행하게 됬다.
Styled-Componet를 이용한 reset CSS 방법이다.

createGlobalStyle

styled-component에서 제공하는 method가 있다.

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

const GlobalStyles = createGlobalStyle` 
  ${reset} // styled-reset이라는 패키지를 설치해야한다. 몇가지만 reset해 줄 경우 사용하지 않아도 무방하다.

    a{
        text-decoration: none;
        color: inherit;
    }
    *{
        box-sizing: border-box;
    }
    input, textarea { 
      -moz-user-select: auto;
      -webkit-user-select: auto;
      -ms-user-select: auto;
      user-select: auto;
    }
    input:focus {
      outline: none;
    }

    button {
      border: none;
      background: none;
      padding: 0;
      cursor: pointer;
    }
`;

export default GlobalStyles;

root component에 스타일 적용!

root component인 App component에 위에서 만든 GlobalStyles를 지정해준다.

import './App.css';
import List from './pages/List';
import Main from './pages/Main';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import GlobalStyles from './GlobalStyles';

function App() {
  return (
    <Router>
      <GlobalStyles /> // 이렇게! 추가해주면 CSS reset이 된다!
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/list" element={<List />} />
      </Routes>
    </Router>
  );
}

export default App;