8) React - Material UI를 이용한 UI 만들기 -1부

앞에서까지 로그인부분과 인증 부분을 공부해 봤다. 이제 material ui를 적용해서 

 

좀 더 UI 다운 모습으로 공부한 내용을 적용해보고 build해서 서버에 배포하는것 까지 공부해 보고자 한다.

 

위의 MIT 라이선스 무료 React Template를 하나 받았다. 

UI 구성만 되어 있는 이 소스에 이제 공부했던 로그인 부분을 입히는 작업을 해보고 한다.

소스 참조 : https://material-ui.com/store/items/devias-kit/

 

먼저 App.js를 아래와 같이 수정한다. 위 소스를 받으면 메뉴가 붙어 있는 DashboardLayout.js 와 메뉴가 없는 Layout 두가지 있다.

 

두가지가 어디에 쓰이는지를 보려면  src/routes.js 파일을 보면 알 수 있다.

여기서 우리는 MainLayout은 로그인 부분 , 그리고 DashBoardLayout 부분은 Home 화면 두가지만 적용해 보고자 한다.

나머지는 메뉴는 삭제 하도록하겠다. ( 화면 그릴때 참조 정도로만 쓰도록...)

 

위의 소스를 받고 나면 아래 처럼 update를 한번 해주자.

npm update

App.js 부분을 아래와 같이 수정한다.

import 'react-perfect-scrollbar/dist/css/styles.css';
import React from 'react';
import { BrowserRouter, Route, Routes, useRoutes } from 'react-router-dom';
import { ThemeProvider } from '@material-ui/core';
import GlobalStyles from 'src/components/GlobalStyles';
import 'src/mixins/chartjs';
import theme from 'src/theme';
// import routes from 'src/routes';
import DashboardLayout from 'src/layouts/DashboardLayout';
import MainLayout from 'src/layouts/MainLayout';
import LoginView from 'src/views/auth/LoginView';
import Home from './views/home/Home';



const App = () => {
  // const routing = useRoutes(routes);

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyles />
      <Routes>
        <Route path="user" element={<DashboardLayout />}>
          <Route path="home" element={<Home />} />
        </Route>
        <Route path="/" element={<MainLayout />}>
          <Route path="login" element={<LoginView />} />
        </Route>
      </Routes>
    </ThemeProvider>
  );
};

export default App;

 

그리고 Home.js 를 아래와 같이 만들어주자. 간단히 서버에서 Data를 가져와서 Grid로 보여주는 Home 화면을 만들어 봤다.

 

지금까지 로그인을 하고 해당 로그인 계속 유지시키고 유지 유지 시킨 로그인의 대한 재 로그인을 Refresh Token으로 유효기간을 두고 페이지간의 이동을 하고 등등 간단히 React로 인증을 하고 화면에 데이터를 보여주는 공부해봤다.

 

여기까지 하면 완벽히는 아니겠지만 기본적인 React의 동작 방식을 어느정도 이해한것 같다.

 

아래는 marterial ui를 이용한 source를 첨부 한다.

 

https://github.com/devraccon/React-Material-Sample