[React] React-Router-Dom 리액트 페이지 이동

React-Router-Dom 페이지 이동

React 프로젝트를 만들면 기본적으로 App.js 파일이 생기고

해당 파일에서 원하는 코드를 입력하여 화면을 그려내고 작동시킨다.

 

그런데 웹 사이트를 보면 페이지가 한 개만 있는 것이 아니라 여러 페이지가 있다.

그래서 여러 페이지를 만들고, 해당 페이지로 이동하기 위해서

React-Router-Dom 을 사용한다.

이는 a 태그와 달리 새로고침 없이 페이지를 전환시켜 준다.

 

Routing 이란?
사용자가 요청한 링크 주소에 맞게 페이지를 찾아서 보여주는 것

 

React-Router-Dom 세팅

설치하기

react-router-dom 을 설치하기 위해 터미널 창에 

본인이 사용하는 패키지 매니저에 따라 명령어를 입력해 준다.

• npm

npm install react-router-dom

• yarn

yarn add react-router-dom

 

나는 npm 을 사용하므로 npm 을 사용하여 react-router-dom 을 설치하였다.

BrowerRouter

react-router-dom 을 사용하기 위해 

내장되어 있는 BrowserRouter 컴포넌트를 사용하여 감싸준다.

 

BrowserRouter 는 방문한 url 기록들을 저장한다.

// index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

 

React-Router-Dom 사용

Routes, Route

본격적으로 사용하기 위해

react-router-dom 에 내장되어 있는 Routes, Route 컴포넌트를 사용한다.

 

Routes
Route 를 감싸주며, 하위 Route 에서 알맞은 Route 를 찾아 랜더링

Route
path 값이 현재 url 과 동일하면 해당 element 를 랜더링

 

그래서 사용자가

"/" 경로에 들어갈 경우 <HomePage / > 컴포넌트를 랜더링 해준다.

// App.jsx
import { Route, Routes } from 'react-router-dom';
import HomePage from './pages/HomePage';
import LoginPage from './pages/LoginPage/LoginPage';
import RegisterPage from './pages/RegisterPage';

function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/login" element={<LoginPage />} />
      <Route path="/register" element={<RegisterPage />} />
    </Routes>
  );
}

export default App;

 

useParmas

웹 페이지의 게시물을 보면 아래 사진의 45, 20 처럼

특정 데이터를 조회할 때 사용되는 url 파라미터를 확인할 수 있다.

이를 사용하기 위해 : 를 사용하여 경로를 설정한다.

그러면 "post/1" "post/123" 페이지에 들어오면 PostPage 컴포넌트가 랜더링 된다.

<Route path="/post/:id" element={<PostPage />} />

 

그리고 PostPage 컴포넌트에서는

useParams 를 사용하여, 현재 페이지의 파라미터 값을 가져올 수 있다.

import React from 'react';
import { useParams } from 'react-router-dom';

const PostPage = () => {
  const { id } = useParams();

  return <div>{id}번 째 게시물 입니다.</div>;
};

export default PostPage;

 

React-Router-Dom 페이지 이동 

useNavigate

페이지에서 요소를 클릭해서 다른 페이지로 이동하고 싶을 때, useNavigate 을 사용한다.

 

그러면 해당 요소를 클릭했을 때, "/" 페이지로 이동하게 된다.

import React from 'react';
import { useParams, useNavigate } from 'react-router-dom';

const PostPage = () => {
  const { id } = useParams();
  const navigate = useNavigate();

  return (
    <>
      <div>{id}번째 게시물 입니다.</div>
      <div onClick={() => navigate('/')}>홈 페이지로 이동하기</div>
    </>
  );
};

export default PostPage;

 

---

 

지금까지 React-Router-Dom 을 세팅하고 사용하는 방법에 대해 알아보았다.

더 자세한 내용을 확인하고 싶으면 아래 공식 페이지에서 확인할 수 있다.

Home v6.21.1 | React Router