4) React - Route를 이용해서 메뉴를 만들어보자.

이제부터 실제UI를 만들어 보자.

UI 구성은 단순하게  Login , Home , Sample1  로 세가지 화면으로 먼저 구성한다.

 

디자인 UI는 Bootstarp React 를 이용할 생각이다.

 

React Route package를 설치하자.

npm install react-router-dom

Route package는 브라우저 주소에 따라 다른 View를 보여지게 해주는 기능을 한다.

응? 기존 SSR(Server Side Rendering)을 하면 당연히 주소에 따라 다른 View를 보여지게 되는데

React 같은 SPA(Single Page Application) 프레임워크는 한번에 모든 페이지정보를 서버에서 다운로드 받아서

브라우저가 보여지는 CSR( Client Side Rendering) 구조이다. 

 

이말은 뭐냐면 클라이언트에서 다운받은 자바스크립트에서 브라우저 주소에 따라 화면을 바꿔주는 기능을 하는 뭔가가 있어야 하는데 이것을 해주는것이 Router 라고 한다.

 

기존의 개발을 해보다 보면 jquery core도 무겁고 그에 따라오는 plugin 및 jquery ui 도 꽤 무겁워서 자바스크립트가 

다운로드 되는데 꽤 시간이 걸리는 문제가 생긴다. 

 

이런 초기 로딩의 문제를 해결하기 위해 React에서 webpack 등을 이용해서 bundling도 하고 Code Splitting을 지원해서

초기 로딩 문제를 해결하려고 한다.

 

Bundling 이나 Code Splitting에 대한 것은 프로젝트 후반에 기능이 완료 된 후 다시 애기하도록 하자.

 

먼저 Router를 쓰는 이유는 원하는 Page를 만들고 그 Page에 주소를 부여하기 위한것이다.

 

이제 Home Page를 만들어 보자 src/pages 폴더를 만들고 HomePage.jsx 와 LoginPage.jsx 를 만들자.

 

// src/pages/HomePage.js


function HomePage(){
   
    return(
        <div>
            <span>Home Page</span>
        </div>
    )
}

export default HomePage;

// src/pages/LoginPage.js

function LoginPage(){
   
    function joinHandler(){
        console.log("JoinHandler click ... ");
    }
    return(
        <div>
            <span>Login Page</span>
            <button type="button" onClick={joinHandler}>Join</button>
        </div>
    )
}

export default LoginPage;

두개의 Page를 만들었다. 이제 두개의 페이지에  Router로 주소를 연결하자.

// src/App.js

import './App.css';
import { BrowserRouter, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import LoginPage from './pages/LoginPage';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Route exact path="/" component={HomePage} />
        <Route path="/login" component={LoginPage} />
      </BrowserRouter>
    </div>
  );
}

export default App;

 이제 npm start 로 서버를 실행하고 브라우저 주소창에 http://localhost:3000 를 입력하면 HomePage 화면이 보여지게 된다.

 

<Route exact path="/home" component={HomePage} />

이부분의 exact 는 path 값과 주소창의 path 값이 정확히 일치해야함. HomePage 보여지게 한다는 말이된다.

예를 들어 exact가 없으면 주소창에 http://localhost:3000/home/abcdded 라고 해도 HomePage 가 나오게 된다.

 

여기까지 간단히 Router를 적용하는 방법에 대해 알아봤다.

 

이제 HomePage화면에 들어갈때 로그인된 상태에서만 HomePage에 들어갈 수 있게 권한 체크기능을 넣어 보도록 하자.