라우팅(Routing)이란 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것 입니다.
리액트 자체에는 이러한 기능이 내장되어있지 않습니다.
리액트가 Framework 가 아닌 Library 로 분류되는 이유
React-router 는 리액트의 라우팅 기능을 위해 가장 많이 사용 되는 라이브러리입니다.
SPA (Single Page Application) - 페이지가 한 개인 애플리케이션
Westagram-frontend : login.html, main.html - 페이지 수만큼 html 파일이 존재
리액트 프로젝트에서 .html 파일의 개수는? 1개 >>> SPA(Single Page Application)
한 개의 웹페이지(html) 안에서 여러 개의 페이지를 보여주는 방법은? >>> Routing
Create React App(CRA)에 특별히 routing을 위한 로직이 들어있지 않기 때문에, 가장 인기 있는 routing solution인 react-router 를 추가해서 routing을 구현하도록 하겠습니다
npm install react-router-dom --save (해당프로젝트에서 터미널입력)
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
///임포트는 반드시 해줘야한다
import Nav from "./components/Nav/Nav";
import Footer from "./components/Footer/Footer";
import Login from "./pages/Login/Login";//(경로)
import Signup from "./pages/Signup/Signup";
import Main from "./pages/Main/Main"; //(경로)
///다른컴퍼넌트를 쓰려하면 다른컴퍼넌트를 임포트 해와야한다
function Router() {
return (
<BrowserRouter>
<Nav />
<Routes>
<Route path="/" element={<Login />} />
// url주소 속성의 값 ///컴포넌트 주소의 값
// "/"경로에 (디폴트값)오게 되면 "Login 컴포넌트를 받겠다
<Route path="/signup" element={<Signup />} />
<Route path="/main" element={<Main />} />
// "/main" url에 진입하면 <Main /> 컴포넌트가 구현
</Routes>
<Footer />
</BrowserRouter>
);
}
export default Router;
ReactDOM.render(<Router />, document.getElementById('root'));
현재 화면에는 컴포넌트가 보여지고 있습니다. (또는 Login 컴포넌트, Main 컴포넌트)
CRA로 만든 앱에 routing 기능을 적용하려면 index.js 를 수정해야 합니다.
<App />
컴포넌트 대신에 routing을 설정한 컴포넌트(<Router />)
로변경해야 합니다.
Route 이동하는 방법은 두 가지가 있습니다.
<Link>
컴포넌트 사용하는 방법
useNavigate
로 구현하는 방법
<Link>
컴포넌트 사용하는 방법import React from "react";
import { Link } from "react-router-dom";
function Login() {
return (
<div>
<Link to="/signup">회원가입</Link>
</div>
);
}
export default Login;
링크 컴퍼넌트는 사용하면 실제로는 <a>
로 변환한다
그렇다면 그냥 리액트에서 <a>
를 사용하면 되는것을 왜 <Link>
를 사용하는 이유는 무엇일까?
- 둘이 사용해야하는 시점이 다르다
<Link>
는 페이지 내부에서 이동할때 사용하면 효율성이 높다
<a>
는 외부페이지 (다른사이트)를 이동할때에는 사용한다
useNavigate
로 구현하는 방법import React from "react";
import { useNavigate } from "react-router-dom";
//임포트 해주어야한다 (함수이다)
function Login() {
const navigate = useNavigate();
//변수를 설정해줘야한다 그리고 호출해주어야한다
const goToMain = () => {
navigate("/main"); //메인페이지의 경로를 인자로 넣어준다
};
// 실제 활용 예시
// const goToMain = () => {
// if(response.message === "valid user"){
// navigate('/main');
// } else {
// alert("가입된 회원이 아닙니다. 회원가입을 먼저 해주세요.")
// navigate('/signup');
// }
// }
return (
<div>
<button className="loginBtn" onClick={goToMain}>
로그인 //버튼에 이벤트를 걸어준다
//onClick = {함수} 이벤트를 지정
</button>
</div>
);
}
export default Login;
<Link />
를 사용하지 않고 함수 호출을 통해 페이지를 이동하는 방법도 있습니다.
goToMain 함수에서 구현된 것처럼, useNavigate
훅을 통해 페이지 이동할 수 있습니다.
useNavigate
훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환합니다. 해당 함수를 navigate 라는 변수에 저장합니다.
이후, navigate 의 인자로 Router.js 에서 설정한 path를 넘겨주면, 해당 경로로 이동할 수 있습니다.
두가지 방법의 차이는 뭘까??
마찬가지로 상황에 따라 다르게 사용
<Link />
클릭 시 바로 이동하는 로직 구현 시에 사용합니다.
ex. Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 > 상세 페이지로 이동
useNavigate
페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 useNavigate 훅을 활용하여 구현합니다.