React Router: 기초

파티를 시작합시다.

이전에 react-router를 사용한 적이 없다면 아마도 서버 측 라우팅을 사용하고 있을 것입니다. 서버 측 라우팅이 무엇인지 모르는 경우 아래 예를 참조하십시오.



보시다시피 다른 페이지로 이동할 때 흰색 화면이 튀는 현상이 있습니다. 이는 사용자가 링크를 클릭할 때마다 요청이 서버로 이동하고 요청된 페이지가 서버에서 클라이언트 시스템으로 전송되기 때문입니다. 이 프로세스는 약간의 시간이 걸리며 서버 측 렌더링이라고 합니다.

React Router를 사용할 때 필요한 페이지가 이미 클라이언트 시스템에 있고 이를 SPA(Single Page Application)라고 부르기 때문에 흰색 화면이 튀는 현상이 없습니다. SPA는 모바일 또는 데스크톱 앱과 같습니다. 그것은 매우 자연스러운 느낌을 가지고 있으며, 매우 빠르게 느껴지며 최고의 사용자 경험을 제공합니다. 가장 중요한 것은 브라우저용 SPA는 JavaScript로만 작성할 수 있다는 것입니다. 그래서 너희들이 그렇게 수요가 많은거야 😉.

이제 코드로 이동하겠습니다. 앱에는 홈, 제품 및 카트(페이지 폴더에 있음)의 3개 페이지가 있습니다. 이제 index.js, App.js 및 3페이지의 초기 코드를 살펴보겠습니다.

//index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
      <App />
  </StrictMode>,
  rootElement
);

//App.js

import Home from "./pages/Home";
import Product from "./pages/Product";
import Cart from "./pages/Cart";

export default function App() {
  return (
    <div className="App">

    </div>
  );
}

//pages/Home.js

export function Home() {
  return (
    <div>
      <p>Welcome to the home page.</p>
    </div>
  );
}

//pages/Product.js

export function Products() {
  return (
    <div>
      <p>Check out the awesome our awesome products.</p>
    </div>
  );
}

//pages/Cart.js

export function Cart() {
  return (
    <div>
      <p>I am the cart. Checkout now!</p>
    </div>
  );
}

이제 react-router를 사용하기 위해서는 react-router-dom 의존성을 추가해야 합니다. 명령 프롬프트에서 아래 명령을 실행하여 설치할 수 있습니다.

$ npm install react-router-dom@6

이제 react-router를 index.js 및 App.js에 적용해 보겠습니다.

//index.js

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

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
  rootElement
);

위에서 우리는 3가지 일을 했습니다. 단지 3가지가 별거 아닙니다.

React Router Dom을 종속성으로 추가했습니다.

"react-router-dom"에서 { BrowserRouter }를 가져왔습니다.

내부를 래핑하여 앱에서 모든 브라우저 작업을 수행할 수 있습니다. (ContextProvider와 유사: 모르는 경우 무시)

//App.js

import { Home } from "./pages/Home";
import { Product } from "./pages/Product";
import { Cart } from "./pages/Cart";
import { Route, Routes } from "react-router-dom";

export default function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/product-page" element={<Product />} />
        <Route path="/awesome-cart" element={<Cart />} />
      </Routes>
    </div>
  );
}

App.js에서 수행한 작업

가져온 홈, 제품 및 장바구니 페이지.

"react-router-dom"에서 가져온 { Route, Routes };

Routes 태그 내부에 3개의 Route를 제공했습니다.
a) <Route path="/" element={<Home />} />는 URL에 "/"를 추가할 때마다 페이지(또는 구성 요소)가 렌더링됨을 의미합니다.
b) <Route path="/product-page" element={<Product />} />는 URL에 "/product-page"를 추가할 때마다 제품 페이지가 렌더링됨을 의미합니다.
c) 유사하게<Route path="/awesome-cart" element={<Cart />} /> URL에 "/awesome-cart"를 추가할 때마다 카트 페이지가 렌더링됨을 의미합니다.

위의 코드가 실제로 동작하는 것을 봅시다:



위에서 App.js에서 다른 경로를 지정하면 다른 페이지(또는 구성 요소)가 렌더링되는 것을 볼 수 있습니다.

이제 많은 사람들이 "하지만 사용자가 URL을 수동으로 편집하지 않을 것"이라고 생각할 수 있는 한 가지는 모든 페이지로 이동하기 위해 링크를 클릭하는 것을 선호한다는 것입니다. 자, 이 문제를 해결해 봅시다.

//App.js


import { Home } from "./pages/Home";
import { Product } from "./pages/Product";
import { Cart } from "./pages/Cart";
import { Route, Routes, Link } from "react-router-dom";

export default function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/product-page" element={<Product />} />
        <Route path="/awesome-cart" element={<Cart />} />
      </Routes>

      <Link to="/">Home</Link>
      <Link to="/product-page">Product</Link>
      <Link to="/awesome-cart">Cart</Link>
    </div>
  );
}

App.js 코드에서 2가지 변경 사항을 수행했습니다.

"react-router-dom"에서 {Link}를 가져왔습니다.

3개의 링크 태그를 추가했습니다.

사용자가 Product를 클릭하자마자 Link 태그는 "to"속성에 지정된 URL(/product-page)로 이동하게 되며 위의 Route 태그에서 이 경로를 볼 수 있습니다. {<Product/>} 요소에 해당하므로 제품 페이지가 렌더링됩니다.

홈 및 장바구니를 클릭한 후에도 유사한 프로세스가 진행됩니다. 아래 gif를 참조하십시오.


(위 페이지의 스타일을 지정할 수 있습니다.)

한 가지 더: 우리는 다른 링크 안에 링크를 줄 수 있습니다. 제품 페이지 내부에 카트 링크를 제공합시다.

//App.js

import { Home } from "./pages/Home";
import { Product } from "./pages/Product";
import { Cart } from "./pages/Cart";
import { Route, Routes, Link } from "react-router-dom";

export default function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/product-page" element={<Product />} />
        <Route path="/awesome-cart" element={<Cart />} />
      </Routes>

      <Link to="/">Home</Link>
      <Link to="/product-page">Product</Link>
    </div>
  );
}

//pages/Product.js

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

export function Product() {
  return (
    <div>
      <p>Check out the awesome our awesome products.</p>
      <Link to="/awesome-cart">Cart</Link>
    </div>
  );
}

이것이 이 블로그의 전부입니다. 다음 블로그에서 나머지 react-router 주제를 가르칠 것입니다. 동일한 알림을 받으려면 내 뉴스레터here를 구독하십시오.

의심스러운 점이 있으면 의견 섹션에서 저에게 물어보십시오. 가능한 한 빨리 답변하도록 노력하겠습니다.

매주 웹 개발과 관련된 3개의 글을 씁니다. 내 뉴스레터(무료)here를 구독하십시오.

트위터:

추신: 엄지손가락을 치켜세워 사랑을 보여주세요.

https://rajatgupta.net/에 원래 게시됨