react-router-dom 적용

CRA로 만든 리액트 앱에 간단한 무료 테마를 적용해 보았다.

https://mui.com/store/items/onepirate/

Onepirate - MUI Store

 

 

이 테마가 내가 하려는 프로젝트와 맞는것 같아 Onepirate로 결정했다.

SignIn 페이지와 SignUp 페이지부터 붙였는데 url 매핑이 필요해서 react-router-dom을 이용해 url과 Component를 매핑해보겠다.

 

 

 

1. Routes 사용

먼저 컴포넌트를 소개하자면 Home("/"), SignIn("/sign-in"), SignUp("/sign-up") 이렇게 세가지 컴포넌트가 각 url와 매핑되어야 한다. 

가장 간단한 방법은 그냥 BrowserRouter, Routes, Route를 이용해 직접 매핑해주는 것이다.

 

import React from 'react';
import { RouterProvider, BrowserRouter, Routes, Route } from 'react-router-dom';
import './App.css';
import router from './route';
import Home from './views/Home';
import SignIn from './views/sign/SignIn';
import SignUp from './views/sign/SignUp';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/sign-in' element={<SignIn />} />
        <Route path='/sign-up' element={<SignUp />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

 

 

 

2. createBrowserRouter 사용

공식 문서에 의하면 This is the recommended router for all React Router web projects. createBrowserRouter가 웹프로젝트에 권장되는 라우터라고 한다.

그리고 path와 컴포넌트 매핑만을 담당하는 컴포넌트가 있는게 객체지향적으로도 더 좋을것 같아 createBrowserRouter를 사용하기로 했다.

createBrowserRouter를 이용해 router를 생성해주었다.

 

import { createBrowserRouter } from 'react-router-dom';
import App from './App';
import SignIn from './views/sign/SignIn';
import SignUp from './views/sign/SignUp';

const router = createBrowserRouter([
    {
        path: '/',
        element: <App />
    },
    {
        path: '/sign-in',
        element: <SignIn />
    },
    {
        path: '/sign-up',
        element: <SignUp />
    }
]);

export default router;

 

 

 

 

그 다음 Index 컴포넌트에서 RouterRrovider에 router를 넘겨준다.

(App 컴포넌트는 Home을 return)

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from "react-redux";
import './index.css';
import reportWebVitals from './reportWebVitals';
import store from './app/store';
import router from './route';
import { RouterProvider } from 'react-router-dom';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <RouterProvider router={router}/>
    </Provider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

 

 

그럼 이제 결과를 확인해보자~~

 

 

1) Home

Home 페이지 (아직 빈페이지)

 

 

2) SignIn

SignIn 페이지

 

 

3) SignUp

SignUp 페이지

 

 

 

정상적으로 페이지가 잘 나온다.

이제 전에 만들어 놓았던 서버와 연동해서 로그인을 해볼 차례!