react 사용 환경 세팅

npx create-react-app my-app

React Router 사용 환경 세팅

npm install react-router-dom@^6.3.0

import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
...

   <BrowserRouter>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">Mypage</Link>
              </li>
              <li>
                <Link to="/dashboard">Dashboard</Link>
              </li>
            </ul>
          </nav>

          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<Mypage />} />
            <Route path="/dashboard" element={<Dashboard />} />
          </Routes>
        </div>
    </BrowserRouter>

styled coponents 설치하기

# with npm
npm install --save styled-components

package.json에 아래 코드 추가하면 여러 버전의 Styled Components가 설치되어 발생하는 문제를 줄여줌

{
  "resolutions": {
    "styled-components": "^5"
  }
}

사용할 파일로 불러와주기

import styled from "styled-components"