Route, Routing, Router
- Route: 일종의 경로
- Routing: 경로를 찾는 행위
- Router: 경로를 찾는 행위를 해주는 도구
- 프론트엔드의 영역에서의 Routing은 다른 경로(url)에 따라 다른 화면(view)를 보여주는 것을 의미
SPA
- SPA(Single Page Application)는 HTML 파일이 단 하나인 웹 어플리케이션을 의미
react-router-dom
- React에서는 라우팅을 위해 반드시 외부의 존재가 필요한데, 그 중에서 가장 많이 사용되는 라이브러리는 react-router-dom
// react-router-dom 설치 방법
npm install react-router-dom
// 설치 후 버전 확인
"name": "react-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.15.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Router 컴포넌트 사용법
1. Router.js (선행 조건: react-router-dom 설치)
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Main from './pages/main';
import Login from './pages/Login/Login';
const Router =()=> {
return (
<BrowserRouter>
<Nav />
<Routes>
<Route path="/" element={<Main />} />
<Route path="/login" element={<Login />} />
</Routes>
<Footer />
</BrowserRouter>
);
};
export default Router;
2. index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Router from './Router';
const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Router />);
3. Route 이동하는 두 가지 방법
3.1. Link 컴포넌트: 조건이 필요 없는 페이지 이동 시 적합한 컴포넌트
const Login =()=> {
return (
<Link to="/join">회원가입</Link>
);
}
3.2. useNavigate hook: 조건이 필요한 페이지 이동 시 적합한 함수
import React from 'react';
import { useNavigate } from 'react-router-dom';
const Login =()=> {
const navigate = useNavigate();
const goToLogin =(password)=> {
if (password === correctPassword) {
navigate('/main');
} else {
navigate('/join');
}
};
return (
<button onClick={goToLogin}>로그인</button>
);
}
export default Login;
Link 컴포넌트 / useNavigate hook / a 태그
| 페이지 이동 대상 | 특징 |
---|
Link 컴포넌트 | 서비스 내부 | 특정한 조건이나 제약 없이 이동 가능 / 페이지 새로고침하지 않기 때문에 리소스 측면에서 효율이 뛰어남 |
useNavigate hook | 서비스 내부 | 특정한 조건이 필요한 경우 사용 / hook: 함수 컴포넌트에서 다루지 못했던 기능을 구현하는 함수 |
a 태그 | 서비스 외부 | N/A |