Styled-Components

React 배우고 css를 어떻게 적용해야할지 몰라
무작정 배웠던 그것
덕분에 scss문법을 배울 수 있었다

Styled-Components는
css in js 문법으로
기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것

개인적으로는 jsx에서 사용하는 상태 값에 따라 변하는 style을 줄 때
편한 것 같다

설치

yarn add -D styled-components @types/styled-components

global style

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
  }
`;

export default GlobalStyle;

// app.tsx

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Frige from "./components/Frige";
import Home from "./components/Home";
import Layout from "./components/Layout";
import GlobalStyle from "./public/theme";
import { RecoilRoot } from "recoil";

const App = () => {
  return (
    <RecoilRoot>
      <GlobalStyle />
      <Router>
        <Routes>
          <Route element={<Layout />}>
            <Route path="/" element={<Home />} />
            <Route path="/frige" element={<Frige />} />
            <Route path="/diary/:id" element={<Frige />} />
          </Route>
        </Routes>
      </Router>
    </RecoilRoot>
  );
};
export default App;