리액트 라우터(React router), react-router-dom, Link, useNavigate 훅에 대하여..
안녕하세요~ 리액트에서 중요한 라우터에 대해 알아보겠습니다. 라우터가 무엇이고 왜 사용하는지 살펴보도록 하겠습니다.
📑목차
1. 라우터(Router)
1-1. 리액트에서 라우터란?
1-2. 리액트에서 라우터를 사용하는 이유
1-3. react-router VS react-router-dom 차이
2. react-router-dom 라이브러리
2-1. react-router-dom 라이브러리란?
2-2. BrowserRouter
2-3. Routes
2-4. Route
2-5. Route 속성 (path, element)
2-6. 라우팅 구조
2-7. Link
2-8. useParams
2-9. useNavigate
서론
이전에는 라우팅을 했을때 이런식으로 하셨을 겁니다. node 환경에서는 다음 코드처럼 라우팅을 해서 클라이언트에게 응답 요청을 보냈을겁니다.
const express = require('express');
const app = express();
// 루트 경로
app.get('/', (req, res) => {
res.send('홈 페이지');
});
// /about 경로
app.get('/about', (req, res) => {
res.send('소개 페이지');
});
// /user 경로에 대한 POST 요청
app.post('/user', (req, res) => {
res.send('유저 등록');
});
app.listen(3000, () => {
console.log('서버가 http://localhost:3000 에서 실행 중');
});
이런 라우팅 처리를 리액트에서는 react-router-dom 이라는 라이브러리를 사용하여 라우팅 처리를 간소화 합니다. 어떤 과정으로 간소화하고, 라우팅 처리를 하는 방법을 알아볼까요~
본론
1. 라우터( Router )
1-1. 리액트에서 라우터란?
사용자가 웹 애플리케이션에서 특정 URL에 접속했을 때 어떤 컴포넌트를 보여줄지 결정하는 기능
1-2. 리액트에서 라우터를 사용하는 이유
가장 큰 이유는 SPA(싱글페이지) 에서 페이지 전환을 하기 위해서 사용되는 이유입니다.
1-3. react-router VS react-router-dom 차이
react-router
react-router는 라우팅의 기능만 가지고 있는 라이브러리로, 브라우저 환경에 의존하지 않는 라우팅 기능만을 포함하고 있기때문에 React Native 같은 환경에서 사용됩니다.
react-router-dom
react-router-dom은 웹 애플리케이션에서 브라우저와 관련된 라우팅 기능을 제공합니다. 웹에서만 사용하며, DOM과 관련된 기능을 추가적으로 제공합니다.
2. react-router-dom 라이브러리
2-1. react-router-dom 라이브러리란?
라우팅을 관리하는데 사용되는 라이브러리로, 사용자가 특정 URL을 요청했을 때 해당 URL에 맞는 컴포넌트를 렌더링해주는 라이브러리 입니다.
2-2. BrowserRouter
참고
History API 란? : 브라우저의 히스토리 기록을 제어하고 조작할 수 있는 기능을 제공해주는 API
react-router-dom에서 제공하는 라우팅 컴포넌트, HTML5의 History API를 사용하여 라우팅합니다.
2-3. Routes
react-router-dom에서 제공하는 컴포넌트 여러 Route 컴포넌트를 관리하고, URL에 맞게 컴포넌트를 렌더링합니다.
2-4. Route
react-router-dom에서 제공하는 컴포넌트로 특정 URL에 맞는 컴포넌트를 렌더링합니다.
2-5. Route 속성
- path : URL를 정의하며, 해당 URL과 일치하면 해당 경로를 처리할 컴포넌트를 element로 렌더링
- element : path에 맞는 URL이 호출되었을때 렌더링할 컴포넌트를 지정
2-6. 라우팅 구조
기본적으로 라우팅은 App.js에서 작성됩니다.
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Deatil from './pages/Detail';
import Mypage from './pages/Mypage';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/detail" element={<Detail />} />
<Route path="/mypage" element={<Mypage />} />
</Routes>
</BrowserRouter>
);
}
export default App;
2-7. Link
HTML에서는 <a>태그로 페이지를 이동했던적 기억나시나요? Link 컴포넌트가 반환하는 값이 <a> 태그이기 때문입니다. 말 그대로 <a> 태그를 사용하면 전체 페이지가 새로고침이 일어나서 서버에 요청을 보냈습니다. 하지만 Link 컴포넌트를 사용하면 브라우저 주소만 바뀌고 react-router 가 연결된 컴포넌트만 렌더링합니다. 즉, 새로고침 없이 동작하는 (SPA) 방식입니다.
react-router-dom에서 제공하는 컴포넌트로 페이지 간 이동을 할때 사용하는 컴포넌트
- to : <a href="" > 에서 경로를 작성했던 것처럼 href="" 속성을 생각하시면 됩니다.
import { Link } from 'react-router-dom'
const Main = () => {
return <>
<Link to="/board/1">1번 게시판으로 이동</Link>
<Link to="/board/2">2번 게시판으로 이동</Link>
<Link to="/board/3">3번 게시판으로 이동</Link>
<Link to="/board/4">4번 게시판으로 이동</Link>
</>
}
2-8. useParmas
react-router 에서 포함된 동적 파라미터를 가져올 수 있도록 해주는 훅
import { useParams } from 'react-router-dom'
// useParams 반환 값 - 객체 {}
const Board = () => {
const {id} = useParams() // === {id : 1}
return <></>
}import { BrowserRouter, Routes, Route } from 'react-router-dom'
function App() {
return (
// 페이지 구조
<BrowserRouter>
<Routers>
<Route path="/" element={<Main />}>
<Route path="/board/:id" element={<Board />}>
</Routes>
</BrowserRouter>
);
}
2-9. useNavigate
useNavigate는 리액트에서 제공하는 훅으로, 사용자가 특정 이벤트를 발생했을 때 주소를 이동시키는 기능을 제공
import { useNavigate } from 'react-router-dom'
const Main = () => {
const navigate = useNavigate(); // 반환값이 제공하는건 페이지를 이동할 수 있는 기능을 가지고 있는 함수
const boardPageHandler = (parmas) => { // parms로 매개변수를 받는다
// 자바스크립트 코드 영역에서 페이지 이동이 필요한 경우
navigate(`/board/${parms}`)
}
return <>
<div onClick={() => boardPageHandler("1")}>1번 게시판으로 이동 </div>
<div onClick={() => boardPageHandler("2")}>2번 게시판으로 이동 </div>
<div onClick={() => boardPageHandler("3")}>3번 게시판으로 이동 </div>
<div onClick={() => boardPageHandler("4")}>4번 게시판으로 이동 </div>
</>
}결론