[리액트] Router

리액트는 SPA(Single Page Application) 방식

새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태이다.

 

 

 

1) Router

• 분배하는 기능을 수행하는 소프트웨어나 하드웨어
• 대표적인 라우터로는 아이피공유기가 있다.
• React의 Router는 URL에 의해 컴포넌트를 분배하는 기능을 한다.
• HTML5에서 Javascript에 추가된 기능중 history객체를 통해 URL을 변조하는 기능이 있다.
• 리액트의 Router는 이 기능을 활용하여 현재 페이지의 URL을 다양하게 변조하여 거기에 각각의 컴포넌트를 분배한다.

 

2) SPA 개발의 장점

• 페이지 이동 없이 JS에 의해 화면이 갱신되므로 실제로 네트워크 통신이 발생하지 않아 실행 속도가 빠르다.

 

3) SPA 개발의 단점

• JS코드가 비대해 질 수 있다. 코드 스플리팅 기법으로 해결가능(코드 분할 작성)
• 하나의 HTML이므로 SEO에 취약하다 (SSR로 해결 가능)
• SSR(서버사이드렌더링) = React + Node / React + PHP / React + Java(Spring)

 

 

react-router-dom

- SPA앱을 만들 때 사용한다.

- url에 따라 실행할 Javascript를 분기한다.

yarn add react-router-dom

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom'; // 라우터!

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

 

 

App.js

import React from 'react';
import { Link, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Main from './pages/Main';
import Error404 from './pages/Error404';

function App() {
    return (
        <div>
            <h1>02. Simple SPA😀</h1>
            <hr />

            {/* 링크 구성 부분 */}
            <nav>
                <Link to="/">[Home]</Link>
                <Link to="/about">[About]</Link>
                <Link to="/main">[Main]</Link>
            </nav>
            
            <hr />

            {/* 페이지 역할을 할 컴포넌트를 명시 */}
            <Routes>
                {/* 첫 페이지로 사용되는 컴포넌트의 경우 exact={true} 명시 */}
                {/* 첫 페이지로 사용되는 컴포넌트는 path에 '/' 권장 */}
                <Route path="/" element={<Home />} exact={true} />
                <Route path="/about" element={<About />} />
                
                {/* 서브라이팅 사용 */}
                <Route path="/main/*" element={<Main />} />
                
                {/* path 속성 없이 Route 지정 -> 지정되지 않은 모든 요청에 반응. 단 Routes블록의 맨 마지막에 배치해야 함 */}
                <Route path="/*" element={<Error404/>} />
            </Routes>
        </div>
    );
}

export default App;