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 설치)

// Router.js

import React from 'react';
// 1. BrowserRouter, Routes, Route를 import합니다.
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// 2. Route 컴포넌트의 path 속성에 설정할 UI를 담은 컴포넌트를 import 합니다.
import Main from './pages/main';
import Login from './pages/Login/Login';

// 3. import은 내용으로 계층 구조를 만듭니다.
const Router =()=> {
	return (
		<BrowserRouter>
			// 4. 만약 라우터 이동과 관계 없이 늘 나타나야 하는 공통 컴포넌트의 걍우는 Routes 밖에 위치합니다.
			<Nav />
			<Routes>
				<Route path="/" element={<Main />} />
				<Route path="/login" element={<Login />} />
			</Routes>
			<Footer />
		</BrowserRouter>
	);
};

// 5. export로 다른 곳에서도 사용할 수 있게 합니다.
export default Router;

2. index.js

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client'; 

// 1. Router 컴포넌트를 import합니다.
import Router from './Router';

// 2. root를 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'; 

// 1. useNavigate를 import합니다.
import { useNavigate } from 'react-router-dom';

const Login =()=> {
	// 2. useNavigate 함수의 리턴값을 navigate 변수에 할당한 후 그 안에 path를 argument로 넣어 함수를 만듭니다.
	const navigate = useNavigate();
	const goToLogin =(password)=> {
		// 3. 특정한 조건이 필요하면 조건문을 사용합니다.
		if (password === correctPassword) {
			navigate('/main');
		} else {
			navigate('/join');
		}
	};

	return (
		// 4. JSX 문법에 따라 버튼 클릭 시 함수를 호출합니다.
		<button onClick={goToLogin}>로그인</button>
	);
}

export default Login;

Link 컴포넌트 / useNavigate hook / a 태그

	페이지 이동 대상	특징
Link 컴포넌트	서비스 내부	특정한 조건이나 제약 없이 이동 가능 / 페이지 새로고침하지 않기 때문에 리소스 측면에서 효율이 뛰어남
useNavigate hook	서비스 내부	특정한 조건이 필요한 경우 사용 / hook: 함수 컴포넌트에서 다루지 못했던 기능을 구현하는 함수
a 태그	서비스 외부	N/A