[React]URL 페이지 연결하기

React에서 URL 페이지를 연결하는 방법에 대해 알아보겠습니다.

React는 SPA(Single Page Application)를 구현하는 데 자주 사용되는 라이브러리로, 페이지 간의 이동을 위해 특별한 라우팅 방법을 사용합니다.

 

React 라우팅 기초
라우팅이란 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미합니다. React에서는 react-router-dom 패키지를 사용하여 라우팅을 구현합니다. 
react-router-dom 설치: 프로젝트에 React 라우팅을 추가하기 위해 npm install react-router-dom 명령어를 통해 react-router-dom을 설치합니다. 

 

React Router 사용법
 * 기본 구성 요소: React Router에서는 <BrowserRouter>, <Routes>, <Route> 등의 컴포넌트를 사용하여 라우팅을 구성합니다. 
 * 페이지 연결: <Link> 컴포넌트를 사용하여 다른 페이지로의 링크를 생성할 수 있습니다. 예를 들어, <Link to="/about">About</Link>은 '/about' URL로 이동하는 링크를 만듭니다.

<Link to={useBaseUrl(siteConfig.customFields.firstDoc)}
        className="button button--lg button--outline button--primary" >
              Getting started
</Link>

Tutorial v6.22.3 | React Router

 

React에서 페이지 이동 시 데이터 유지하기
useNavigate와 useLocation 훅을 이용하여 페이지 이동 시 데이터를 전달하고 유지할 수 있습니다. useNavigate를 사용해 이동할 때, state를 통해 데이터를 전달하고, useLocation을 사용해 도착한 페이지에서 데이터를 받아올 수 있습니다.

 

로컬 스토리지 활용하기
데이터 저장 및 불러오기: 페이지 이동 후에도 데이터를 유지하려면 로컬 스토리지를 사용하는 방법이 있습니다. 사용자가 페이지를 이동하기 전에 데이터를 로컬 스토리지에 저장하고, 새 페이지에서 해당 데이터를 불러와 사용할 수 있습니다.

 

react url 페이지 연결 예제

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        {/* A <Routes> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

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

function HomePage() {
  let navigate = useNavigate();

  function handleClick() {
    navigate('/about'); // '/about' 페이지로 이동
  }

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}

export default HomePage;

import React from 'react';

function AboutPage() {
  return (
    <div>
      <h2>About Page</h2>
    </div>
  );
}

export default AboutPage;

HomePage 컴포넌트에서 버튼을 클릭하면 AboutPage로 이동하는 기능을 구현했습니다. useNavigate 훅을 사용하여 handleClick 함수 내에서 /about 경로로 이동하도록 했습니다.