[React] 페이지 이동하기

Next.js에서는 pages 폴더를 통해 접근하는 주소별 컴포넌트(페이지)를 넘겨준다. (SSR 방식) router 변수를 이용하여 이동할 경로를 처리한다. 

 

반면 기본 React에서는 폴더 구조와는 상관없이 네이게이션을 정의해서 사용한다. 

npm i react-router-dom

 

BrowserRouter를 App루트에 감싸준다.

import React from "react";

import ReactDOM from "react-dom/client";

import App from "./App";

import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(

  <BrowserRouter>

    <React.StrictMode>

      <App />

    </React.StrictMode>

  </BrowserRouter>

);

 

그리고 App에서 Routes 컴포넌트 하단에 경로를 지정해준다. 

import BlogMain from "./pages/BlogMain";

import LoginForm from "./pages/LoginForm";

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

export default function App() {

  return (

    <>

      <Routes>

        <Route path="/" element={<BlogMain />} />

        <Route path="/login" element={<LoginForm />} />

      </Routes>

    </>

  );

}

 

사용하는 지점에 다음과 같이 처리한다.

  <Link to={"/login"}>로그인</Link>

 

그리고 로그인을 클릭하면, LoginForm 페이지로 이동하게 된다.

 

추가 내용)

Link와 a태그 href를 이용하는 방법 모두 페이지 이동에는 문제가 없다.

하지만 a태그를 사용하는 경우에 페이지를 다시 로드하게 된다. 따라서 Link를 이용하는 것이 좋다.

(a 태그를 사용하면 실제로 버벅임이 느껴진다.)

 

https://stackoverflow.com/a/61028649

 

웹은 주소창(Controller)를 제공하지만 모바일 앱은 화면 이동에 대한 모든 통제를 앱 내에서 관리한다. 웹 처럼 주소를 변경하여 Load하는 개념 자체가 존재하지 않는다. 

 

웹에서는 앞/뒤/새로고침/주소창 이동 다 지원 (브라우저단에서 지원)

앱에서는 앞으로 가기(없음) / 뒤로가기(있음, iOS는 따로 버튼을 만드는 편) / 새로고침(페이지 구현에 따라 다름) / 주소창 이동(불가 - 개념 자체가 없음)

 

디테일한 부분이 다른 듯...