[React] 리액트 라우터 사용하기(Route, Link, useNavigate 훅)

리액트 라우터 공식사이트

리액트를 공부하다 필수개념인 라우터를 정리할 필요가 있을 거 같아 포스팅해 보았다.

 

❓라우팅이란?

사용자가 요청한 URL에 따라 그에 맞는 페이지를 보여주는 기능을 라우팅이라고 한다.

HTML에서 쓰는 a 태그로 경로를 연결하면 전체 페이지가 랜더링 되기 때문에,

리액트에서는 필요한 컴포넌트만을 랜더링 하기 위해 라우팅 개념을 활용한다.

라우팅 관련 라이브러리가 많이 있지만, 그 중에서 가장 많이 쓰는 **리액트 라우터(React Route)**를 학습해보자.

 

1️⃣ 리액트 라우터 사용하기

사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에 맞게끔 여러 종류의 라우터 컴포넌트가 존재한다. 일반적인 환경에서는 <BrowserRouter> 컴포넌트와 <HashRouter> 컴포넌트를 가장 많이 사용한다.

 

• BrowserRouter: HTML5에서 지원하는 브라우저의 주소를 감지한다.
• HashRouter: 해시 주소(http://~어쩌고/#주소)를 감지한다.

 

설치 방법:

npm install react-router-dom

 

▶️ BrowserRouter

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>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>
);

최상위 컴포넌트에 들어가 출력할 컴포넌트를 <BrowserRouter> 컴포넌트로 감쌉니다.

Create React App을 사용하여 프로젝트를 시작했다면 index.js가 최상위 컴포넌트입니다.

index.js에 들어가서 App 컴포넌트를 BrowserRouter 컴포넌트로 감쌉니다.

앞으로 App 컴포넌트에서 라우트를 사용하여 페이지를 연결할 것이기 때문입니다.

 

▶️ Routes, Route

import { Routes, Route } from 'react-router-dom';

function App() {
	return (
		<div className="App">
			<Routes>
				<Route path="/" element={<Main />} />
				<Route path="/shop" element={<Shop />} />
			</Routes>
		</div>
	);
}

export default App;

• <Route> 컴포넌트의 path 속성 값의 경로로 들어갈 시, element 속성에 준 값을 랜더링합니다.
• 위 예시에서는 / 경로로 들어갈 시 Main 컴포넌트를 랜더링하며, /shop 경로로 들어갈 시 Shop 컴포넌트를 랜더링해 줍니다.
• <Routes> 태그는 <Route> 태그를 감싸는 용도로 활용합니다.

 

▶️ Link

import { Link } from 'react-router-dom';

function Header() {

    <Link to="/">홈</Link>
    <Link to="/detail">상세페이지</Link>
    <Link to="/myaccount">나의정보</Link>
    <Link to="/shop">상점</Link>
    
}

Link 태그는 HTML의 a 태그를 대신합니다. 특정 경로로 이동하기 위한 컴포넌트입니다.

a 태그는 브라우저를 새로고침 하여 모든 요소를 재랜더링 합니다.

하지만 Link 컴포넌트는 Route 컴포넌트와 연결되어 있는 경로로 이동하여 Route 컴포넌트의 element 속성 값만을 랜더링합니다.

 

 

---

💙 useNavigate 훅 사용하기

React Route에는 경로 이동을 위한 유용한 훅들이 있는데, 그 중 대표적으로 useNavigate 훅이 있습니다.

useNavigate 훅은 Link 컴포넌트를 사용할 수 없는 환경에서 사용합니다.

 

Link 컴포넌트는 경로 이동을 위한 버튼을 생성하기 때문에 다른 요소의 콜백함수로서 기능할 수 없습니다.

가령, 특정 동작이 일어날 때 새로운 경로로 이동하는 기능을 구현할 경우 useNavigate 훅을 실행함수로서 사용할 수 있습니다.

useNavigate 훅은 Navigate라는 함수를 반환합니다.

 

사용법)

import { useNavigate } from 'react-router-dom';

function Button() {

const navigate = useNavigate();

return (
	<button onclick( () => { navigate("/") }>
    	    홈으로 이동하는 버튼
	</button>
 )

이렇게 사용할 블록 안에서 변수를 하나 선언하고(navigate라는 이름으로 짓는 것이 관례), useNavigate()를 대입합니다.

그러면 해당 변수에 경로 이동 함수가 반환됩니다.

 

그리고 원하는 위치에 navigate 함수를 추가하여 경로이동 기능을 구현합니다.

매개변수는 경로 명을 ""로 감싸서 받습니다.

 

이와 같이 useNavigate 훅은 경로이동 함수를 반환하기 때문에 코드의 실행부분에 넣어 사용합니다.

Link 컴포넌트는 경로이동 기능을 제공하는 '컴포넌트' 자체이기 때문에 useNavigate 훅이랑은 다른 경우에서 사용합니다.