[React] 라우터(Router) 사용 방법, 리액트 페이지 이동, Link useNavigate 사용방법

프론트엔드/React

[React] 라우터(Router) 사용 방법, 리액트 페이지 이동, Link useNavigate 사용방법

순코딩 2023. 7. 15. 17:07

문제발생

리액트에서는 페이지 이동을 원할 때 a태그를 사용을 권장하지 않는다.

이유 - 1. 페이지 새로고침 방지, 2. 내부라우팅, 3. 브라우저 히스토리 관리

위와 같은 이유로 리액트에서는 라우터(Router)라는 라이브러리를 사용하여 페이지 이동을 권장한다.

그렇다면 라우터는 어떻게 사용할까?

문제해결

1. 라우터 다운로드

npm install react-router-dom

2. index.js 수정 (라우터 적용)

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom"; // 라우터 라이브러리 임포트
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    {/* App 컴포넌트를 BrowserRouter 태그로 감싼다. */}
    <BrowserRouter> 
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

reportWebVitals();

3. App.js 수정 (라우트 생성)

//App.js
import React from "react";
import { Route, Routes } from 'react-router-dom'; // 라우터 라이브러리 임포트
import Main from "./components/Main"; // 이동할 컴포넌트 임포트
import Profile from "./components/Profile"; // 이동할 컴포넌트 2

function App() {
  return (
    <>
      <Routes>
      {/* 이동할 컴포넌트들 */}
        <Route path="/" element={<Main />} /> 
        <Route path="/Profile" element={<Profile />} 
      </Routes >
    </>
  );
}

export default App;

//////////참고!

///// Route 사용 방법
<Route path="주소규칙" element={보여 줄 컴포넌트} />


////// Route 사용 예시
<Route path="/Profile" element={<Profile />} 

// 위 예시에서 주소규칙이 /Profile 이므로 <Link to="/Profile"> 을 통해 Profile.jsx 컴포넌트로 이동할 수 있다.

4. 페이지 이동

4.1 Link로 페이지 이동

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

const OnSignIn = () => {
    return (
        <div>
            <Link to="/Profile">프로필로 이동</Link>
        </div>
    );
};

export default OnSignIn;on

//////////참고!

///// Link 사용 방법
<Link to="경로">링크 이름</Link>

///// Link 사용 예시
<Link to="/Profile">프로필로 이동</Link>

// '프로필로 이동' 텍스트를 클릭하면 "/Profile" 주소 규칙으로 설정된 컴포넌트로 페이지를 이동한다.

4.2 useNavigate로 페이지 이동

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

const OnSignIn = () => {
  const navigate = useNavigate(); // useNavigate 훅을 담은 navigate 변수 선언

  const signIn = () => {
  	// 유저 인증이 성공하면 프로필 페이지로 이동
    if(userAuth === true)
    {
    	navigate("/Profile"); // navigate 사용
    }
    else
    {
    	console.log("인증 오류");
    }
  };

  return (
    <div>
      {/* 버튼 클릭 시 인증 후 프로필 페이지로 이동 */}
      <button onClick={signIn}>로그인</button>
    </div>
  );
};

export default OnSignIn;

필자는 단순히 <a> 대체 용도라면 <Link>를 권장하지만

인증 등 별도의 처리 후 페이지 이동을 원한다면 useNavigate를 권장한다.