maketheworldwise/README.md

## README.md

      
    Raw
  

              README.md
            
          
    기본 설치 방법

$ nvm use 16.16.0
$ npx create-react-app .
Router 의존성 설치 및 적용

$ npm install react-router-dom --save
// Router.js
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Nav from "./components/Nav/Nav";
import Footer from "./components/Footer/Footer";
import Login from "./pages/Login/Login";
import Signup from "./pages/Signup/Signup";
import Main from "./pages/Main/Main";

function Router() {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/main" element={<Main />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}

export default Router;
// index.js
ReactDOM.render(<Router />, document.getElementById('root'));
Router Path 이동 방법

# Link 컴포넌트 사용
<Link to="/sign-up">회원가입</Link>

# useNavigate 사용
const navigate = useNavigate();
navigate("/main");
Sass/Styled Components 설정 및 적용

$ npm install sass --save
$ npm install styled-components --save
$ npm install styled-reset --save
Router에 Reset 설정 및 적용

// Router.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Reset } from 'styled-reset';
import Main from './Pages/Main/Main';
import Header from './Components/Header/Header';
import Footer from './Components/Footer/Footer';

function Router() {
  return (
    <BrowserRouter>
      <Reset />
      <Header />
      <Routes>
        <Route path="/" element={<Main />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}

export default Router;
GlobalStyle 공통 스타일 적용

// GlobalStyle.js
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyles = createGlobalStyle`
  ${reset}
  body {
    box-sizing: border-box;
  }
`;

export default GlobalStyles;
// Router.js
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Main from './Pages/Main/Main';
import GlobalStyles from './Styles/GlobalStyles';

function Router() {
  return (
    <BrowserRouter>
      <GlobalStyles />
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/main" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;