[React, FrontEnd] 웹 사이트 프로젝트 일지-1. 프로젝트 생성과 material ui 설치, 템플릿 이용해서 로그인 및 회원가입 페이지 구현(중단)

리액트 폴더 만들기

create-react-app .

 

material ui 사용

https://mui.com/getting-started/installation/

Installation - MUI

yarn add @mui/material @emotion/react @emotion/styled

yarn add @mui/material @mui/styled-engine-sc styled-components

yarn add @mui/icons-material

위 명령어들을 터미널에 입력해서 필요한 패키지들을 모두 다운받아 준다. 

 

 

material ui 템플릿

https://mui.com/getting-started/templates/

9+ Free React Templates - MUI

 

sign-in side와 sign up 코드 깃헙 저장소에서 복사 붙여넣기 하여 프로젝트에 적용

로그인 페이지

 

회원가입 페이지

페이지는 반응형으로 제공된다.

 

 

로그인 페이지와 회원가입 페이지 전환

페이지간 이동을 위해 React Router Dom 설치

yarn add react-router-dom

 

App.js

import "./App.css";
import LoginPage from "./pages/LoginPage";
import SignUpPage from "./pages/SignUpPage";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<LoginPage />} />
        <Route path="/signup" element={<SignUpPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

SignUpPage.js

...중략
            <Grid container justifyContent="flex-end">
              <Grid item>
                <Link href="/" variant="body2">
                  Already have an account? Sign in
                </Link>
              </Grid>
            </Grid>

 

LoginPage.js

...중략
                <Grid item>
                  <Link href="/signup" variant="body2">
                    {"회원가입"}
                  </Link>
                </Grid>

href = "/이동할 페이지 이름"

보통 리액트의 페이지 이동은 Link to를 통해 이루어지는데 material ui에서는 Link href를 쓰는 모양이다. 

페이지 이동 결과

 

참고: 공식문서 Link

https://mui.com/components/links/

Links - MUI

 

 

 

 

---

참고 사이트

 

 

<회원가입 / 로그인 창 이동 구현>

https://backend-intro.vlpt.us/5/06.html

5-6. 회원인증 폼 (Form) 구성하기 · GitBook

 

 

<리액트에서 a태그 href와 Link의 차이점>

https://tinyurl.com/y8xc9jvv

React : a 태그와 Link 의 차이점, 어떻게 사용해야 할까?

 

https://gomgomkim.tistory.com/9

[React] Link와 <a>태그의 href의 차이

Link 사용 시 필요한 부분만 랜더링하여 속도 면에서의 개선이 이루어진다.