๐Ÿ•Ž react router

kcj_dev96ยท2022๋…„ 2์›” 11์ผ
0

๋ฆฌ์•กํŠธ

๋ชฉ๋ก ๋ณด๊ธฐ
13/23

๐Ÿ•Ž react router๋ž€?

์ฃผ์†Œ์— ๋”ฐ๋ผ ๊ทธ์— ๋งž๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋กœ๋”ฉ์‹œ๊ฐ„์„ ๋‹จ์ถ•ํ•˜์—ฌ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ๋Š” ๋ฆฌ์•กํŠธ ๋ผ์šฐํŒ… ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.

  • ๋ผ์šฐํŒ… : ๋‹ค๋ฅธ ์ฃผ์†Œ์— ๋‹ค๋ฅธ ํ™”๋ฉด์„ ๋ณด์—ฌ ์ฃผ๋Š” ๊ฒƒ

๊ธฐ์กด์—๋Š” HTML๋ฌธ์„œ๋‚˜ ํ…œํ”Œ๋ฆฟ ์—”์ง„์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ฒฝ๋กœ์— ๋งž๋Š” ๋ฌธ์„œ๋ฅผ ํ• ๋‹นํ•ด์ฃผ์—ˆ๋‹ค.
์ƒˆ๋กœ์šด ๊ฒฝ๋กœ์— ๋“ค์–ด๊ฐˆ ๋•Œ๋งˆ๋‹ค ์„œ๋ฒ„์—์„œ HTML์™€ ๋ฐ์ดํ„ฐ๋“ค์„ ๋ถˆ๋Ÿฌ์™€์•ผํ–ˆ๋‹ค.

์ด๋Š” ๋งŽ์€ ์‚ฌ์šฉ์ž๊ฐ€ ๋ชฐ๋ฆฌ๊ฒŒ ๋˜๋ฉด ์„œ๋ฒ„์˜ ๊ณผ๋ถ€ํ•˜๋ฅผ ์ผ์œผํ‚ฌ ์ˆ˜ ์žˆ๊ณ  ์ธํ„ฐ๋ ‰์…˜์ด ๋งŽ์€ ์›น์ด๋ผ๋ฉด ์ƒํƒœ์œ ์ง€ ์–ด๋ ค์›€ ๋ฐ ๋กœ๋”ฉ์˜ ์‹œ๊ฐ„์ด ๊ฑธ๋ฆด ์ˆ˜ ์žˆ๋‹ค๋Š” ๋‹จ์ ์ด ์žˆ๋‹ค.

์ด๋Ÿฌํ•œ ๋‹จ์ ์„ ๋ณด์™„ํ•˜๊ธฐ์œ„ํ•ด ๋ฆฌ์•กํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋ทฐ ๋ Œ๋”๋ง์„ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋‹ด๋‹นํ•˜์—ฌ ๊ฒฝ๋กœ์— ๋”ฐ๋ฅธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ•„์š”ํ• ๋•Œ๋งˆ๋‹ค ๋ถˆ๋Ÿฌ์™€ ๋ณด์—ฌ์ค€๋‹ค.

์ด๋Ÿฌํ•œ ๋ฐฉ๋ฒ•์€ ๊ฒฝ๋กœ์ด๋™์„ ํ•˜์—ฌ๋„ ๋Š๊น€์—†์ด ํ™”๋ฉด์ „ํ™˜์„ ํ•  ์ˆ˜ ์žˆ์–ด ๋กœ๋”ฉ์‹œ๊ฐ„์„ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฐ•์ ์ด ์žˆ๋‹ค.

ํ•˜์ง€๋งŒ ๋ชจ๋“  ๋ทฐ๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ , ์ฆ‰ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ถˆ๋Ÿฌ์™€์•ผํ•œ๋‹ค๋Š” ์ ์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์ด ๋งค์šฐ ์ปค์ง„๋‹ค๋Š” ๋‹จ์ ์ด ์žˆ๋‹ค.

์ด๋Š” ํŽ˜์ด์ง€ ๋กœ๋”ฉ์‹œ ์‚ฌ์šฉ์ž๊ฐ€ ์‹ค์ œ๋กœ ๋ฐฉ๋ฌธํ•˜์ง€์•Š์€ ์Šคํฌ๋ฆฝํŠธํŒŒ์ผ๋„ ๋ถˆ๋Ÿฌ์™€์งˆ ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.

์ด๋Ÿฌํ•œ ๋‹จ์ ์€ ์ถ”ํ›„ ์ฝ”๋“œ์Šคํ”Œ๋ฆฌํŒ…์ด๋ผ๋Š” ๋ฐฉ๋ฒ•์„ ์ด์šฉํ•˜์—ฌ ๋กœ๋”ฉ์†๋„๋ฅผ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ๋‹ค.

์ •๋ฆฌํ•˜์ž๋ฉด react router๋Š” ๋ผ์šฐํŒ…์„ ๋ณด๋‹ค ๊ฐ„ํŽธํ•˜๊ฒŒ ๊ตฌํ˜„ํ•ด์ค„์ˆ˜ ์žˆ๋Š” ๋ฆฌ์•กํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.

โœ๏ธ ์‚ฌ์šฉ๋ฒ•

react router๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ์—์„œ ํ•ด๋‹น ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ react์™€ ๋ณ„๊ฐœ๋กœ ์„ค์น˜ํ•ด์ค˜์•ผํ•œ๋‹ค.

npm i react-router-dom

react router ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ํฌ๊ฒŒ 2๊ฐ€์ง€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์žˆ๋‹ค.

  • react router : react router์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ์„ ๋‹ด๊ณ  ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. ๋ผ์šฐํŒ…, ํ•ต์‹ฌ ์ปดํฌ๋„ŒํŠธ, ํ›… ๋“ฑ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
  • react router dom: react router ๊ธฐ๋Šฅ์„ ๋ชจ๋‘ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์ถ”๊ฐ€๋กœ DOM API๊ธฐ๋Šฅ์ด ์žˆ๋‹ค.(BroswerRouter, HasgRouter , Link)

๐Ÿ—ƒ๏ธ ํƒœ๊ทธ์˜ ์ข…๋ฅ˜ ๋ฐ ์—ญํ• 

react router ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—๋Š” ์—ฌ๋Ÿฌ์—ญํ• ์„ ํ•˜๋Š” ํƒœ๊ทธ๊ฐ€ ์žˆ๋‹ค.
๊ฐ ํƒœ๊ทธ๊ฐ€ ์–ด๋–ค ์—ญํ• ์„ ํ•˜๋Š”์ง€ ์•Œ์•„๋ณด๊ฒ ๋‹ค.

BrowserRouter

  • BrowserRouter๋Š” ์ตœ์ƒ๋‹จ ์ปดํฌ๋„ŒํŠธ์— ๊ฐ์‹ธ์ค˜์•ผํ•˜๋Š” ํƒœ๊ทธ์ด๋‹ค.

  • ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ react router ๊ตฌํ˜„ํ•  ํ™˜๊ฒฝ ์ปจํ…์ŠคํŠธ๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

  • History API๋ฅผ ์ด์šฉํ•˜์—ฌ ์„œ๋ฒ„์— ์š”์ฒญ์—†์ด ๊ฒฝ๋กœ์ด๋™์„ ํ•˜๊ฒŒ ํ•ด์ฃผ๊ณ  ํ˜„์žฌ ์ฃผ์†Œ์™€ ๊ด€๋ จ๋œ ์ •๋ณด๋ฅผ ์ €์žฅํ•ด์ค€๋‹ค.
    ์ด๋Š” ์ƒˆ๋กœ๊ณ ์นจ์—†์ด ํŽ˜์ด์ง€์ด๋™์„ ํ•˜๊ฒŒ ํ•ด์ฃผ๋ฉฐ, ํ˜„์žฌ ์ฃผ์†Œ์™€ ๊ด€๋ จ๋œ ์ •๋ณด๋ฅผ props๋กœ ์‰ฝ๊ฒŒ ์กฐํšŒํ•˜๊ฑฐ๋‚˜ ์‚ฌ์šฉํ•˜๊ฒŒ ํ•ด์ค€๋‹ค.

History API
์„œ๋ฒ„์—๊ฒŒ ์š”์ฒญ์—†์ด ํŽ˜์ด์ง€์ „ํ™˜ ๋ฐ ๋’ค๋กœ๊ฐ€๊ธฐ๋ฅผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” Web API

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

Route

  • ํ•ด๋‹น ๊ฒฝ๋กœ(path)์— ๋งž๋Š” ์ปดํฌ๋„ŒํŠธ ๋ฐ element๋ฅผ ๋ Œ๋”๋งํ•ด์ฃผ๋Š” ์—ญํ• ์„ ํ•˜๋Š” ํƒœ๊ทธ

<Route path ="/about" element = {<About/>}/>
<Route path ="/contact" element = {<Contact/>}/>

  • ๊ฒฝ๋กœ์— ๋งž๋Š” ์ฃผ์†Œ๋ฅผ ์ž…๋ ฅํ•ด์ฃผ๋ฉด element attribute์— ํ• ๋‹นํ•œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ Œ๋”๋ง๋œ๋‹ค.

  • ๋ณธ ์ฃผ์†Œ๊ฐ€ http://localhost:3000์ด๋ผ ํ•˜์˜€์„ ๋•Œ http://localhost:3000/about๋กœ ์ด๋™ํ•œ๋‹ค๋ฉด About์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด์—ฌ์ค€๋‹ค.

Routes

  • react router version 6๋ถ€ํ„ฐ๋Š” Route๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” Routes๋กœ ๊ฐ์‹ธ์ค˜์•ผํ•œ๋‹ค.
    (์ด์ „ version์—์„œ๋Š” ๊ฐ์‹ธ์ค„ ํ•„์š”๊ฐ€ ์—†์—ˆ์Œ.)

  • Route๋“ค์„ ๋‹ด์•„๋†“๋Š” ํƒœ๊ทธ์ด๋‹ค.

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
  • Routes๋Š” ๊ฒฝ๋กœ์— ๋”ฐ๋ผ ๊ทธ์— ๋งž๋Š” ์ปดํฌ๋„ŒํŠธ๋งŒ ๋ Œ๋”๋งํ•˜๊ฒŒ ํ•ด์ค€๋‹ค.
    ์ฆ‰, about๊ฒฝ๋กœ์— ๋“ค์–ด๊ฐ€๋ฉด Home์ปดํฌ๋„ŒํŠธ๋Š” ๋ณด์ด์ง€ ์•Š๋Š” ๊ฒƒ์ด๋‹ค.
    (exact attribute๋„ version6๋ถ€ํ„ฐ legacy๋จ.)

Linkํƒœ๊ทธ๋Š” history API๋กœ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ฐ์‹ธ์ง„ aํƒœ๊ทธ์™€ ๊ฐ™๋‹ค.

  • Link๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ํด๋ฆญํ•จ์œผ๋กœ์จ ํ•ด๋‹น ๊ฒฝ๋กœ์— ๋”ฐ๋ฅธ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๊ฒŒ ํ•˜๋Š” ํƒœ๊ทธ์ด๋‹ค.
    (aํƒœ๊ทธ์™€ ์œ ์‚ฌ)

  • ํŽ˜์ด์ง€ ์ „ํ™˜ ๋ฐฉ์ง€ ๊ธฐ๋Šฅ์ด ๋‚ด์žฅ๋˜์–ด์žˆ๋‹ค.

aํƒœ๊ทธ์™€ Linkํƒœ๊ทธ์˜ ์ฐจ์ด์ 
a ํƒœ๊ทธ๋Š” ํŽ˜์ด์ง€๊ฐ€ ์ „ํ™˜๋˜๋Š” ๊ณผ์ •์—์„œ ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ๋•Œ๋ฌธ์— ๊ธฐ์กด์— ๋ Œ๋”๋ง๋˜์—ˆ๋˜ ๊ฒƒ๋“ค์ด ๋‹ค ๋‚ ๋ผ๊ฐ€๊ฒŒ ๋œ๋‹ค.
ํ•˜์ง€๋งŒ Linkํƒœ๊ทธ๋Š” History API๋ฅผ ์ด์šฉํ•˜์—ฌ ์„œ๋ฒ„์—๊ฒŒ ์š”์ฒญํ•˜์ง€์•Š๊ณ  ๋ธŒ๋ผ์šฐ์ € ๋‚ด์—์„œ ํ•ด๊ฒฐํ•ด ํŽ˜์ด์ง€์˜ ์ฃผ์†Œ๋งŒ ๋ณ€๊ฒฝํ•ด์ฃผ๋Š” ์žฅ์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.
๋”ฐ๋ผ์„œ aํƒœ๊ทธ๊ฐ€ ์•„๋‹Œ Linkํƒœ๊ทธ๋ฅผ ์“ฐ๋Š” ๊ฒƒ์ด ๋” ์ ์ ˆํ•˜๋‹ค.

  • ์˜ˆ์‹œ : <Link to="/about">About</Link> // aboutํŽ˜์ด์ง€๋กœ ์ด๋™

HashRouter

  • HashRouter์€ ๋ช‡๋ช‡ ์ด์œ ๋กœ url์„ ์„œ๋ฒ„๋กœ ์ „์†กํ•˜๋ คํ•˜์ง€ ์•Š์„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.
    ์ด๋Š” ์„œ๋ฒ„์— ์˜จ์ „ํžˆ ๋ชจ๋“  ๊ฒƒ์„ ์ „๋‹ดํ•˜์ง€ ์•Š๊ฒŒ ํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.

  • HashRouter๋Š” ์ฃผ์†Œ์— #์„ ๋ถ™์ž„์œผ๋กœ์จ ํ˜„์žฌ ์ฃผ์†Œ์™€ ๊ด€๋ จ๋œ ์ •๋ณด๋ฅผ ์ €์žฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค.
    ๊ทธ๋ฆฌ๊ณ  ํ•ด๋‹น url์€ ์„œ๋ฒ„๋กœ ๋ณด๋‚ด์ง€์ง€์•Š๋Š”๋‹ค.

Router

Router์€ BrowserRouter,HashRouter,NativeRouter,StaticRouter ๋“ฑ ๋ชจ๋“  router component๋“ค์ด ๊ณต์œ ํ•˜๋Š” low-level interface์ด๋‹ค.

์‚ฌ์šฉ ์šฉ๋„์— ๋งž๊ฒŒ ์œ„์™€ ๊ฐ™์€ high-level routers๋“ค์ด ๋งŒ๋“ค์–ด์กŒ๊ธฐ ๋•Œ๋ฌธ์— router์„ ์ง์ ‘์ ์œผ๋กœ ์“ธ ์ผ์€ ๊ฑฐ์˜ ์—†๋‹ค.

๋•Œ๋ฌธ์— ์ž์‹ ์˜ ํ™˜๊ฒฝ์— ๋”ฐ๋ผ ๋งž๋Š” high-level router๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

ํŠน๋ณ„ํ•œ Linkํƒœ๊ทธ๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋œ๋‹ค.
NavLink๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒฝ์šฐ๋Š” ์—ฌ๋Ÿฌ ๊ฒฝ์šฐ๊ฐ€ ์žˆ์ง€๋งŒ ๋Œ€ํ‘œ์ ์ธ ์˜ˆ๋กœ Navigation Menu์—์„œ ์นดํ…Œ๊ณ ๋ฆฌ๊ฐ€ ์„ ํƒ๋ฌ์„ ๋•Œ์— ํ‘œ์‹œ๋˜๊ฒŒ ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

      <NavLink
        to="/"
        style={({ isActive }) => (isActive ? { color: "red" } : null)}
      >
        Home
      </NavLink>
      |
      <NavLink
        to="about"
        style={({ isActive }) => (isActive ? { color: "red" } : null)}
      >
        About
      </NavLink>
      |
      <NavLink
        to="contact"
        style={({ isActive }) => (isActive ? { color: "red" } : null)}
      >
        Contact
      </NavLink>
      <Routes>
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
      </Routes>

  1. style ์†์„ฑ์— ํ•จ์ˆ˜๋ฅผ ํ• ๋‹นํ•ด์ค€๋‹ค.
  2. ํ•จ์ˆ˜์˜ ์ธ์ˆ˜๋กœ {isActive}๋ฅผ ํ• ๋‹นํ•ด์ค€๋‹ค.
    isActive๋Š” boolean์„ ๋ฐ˜ํ™˜ํ•˜๋Š”๋ฐ ํ•ด๋‹น ๋งํฌ๊ฐ€ ์„ ํƒ๋˜์—ˆ์„ ๋•Œ์—๋Š” true,
    ์„ ํƒ๋˜์ง€์•Š์•˜์„ ๋•Œ์—๋Š” false๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
  3. ๊ฐ ์นดํ…Œ๊ณ ๋ฆฌ๊ฐ€ ์„ ํƒ๋˜์—ˆ์„ ๋•Œ์— ์ง€์ •ํ•ด๋†“์€ style์ด ํ™œ์„ฑํ™”๋œ๋‹ค.

customizing

NavLink๋งˆ๋‹ค ์œ„์™€ ๊ฐ™์ด style์†์„ฑ์„ ์ž…๋ ฅํ•ด์ฃผ๊ธฐ ๋ฒˆ๊ฑฐ๋กญ๋‹ค๋ฉด customizingํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด์ค€๋‹ค.

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

const ColorNavLink = (path, LinkName) => {
  return (
    <NavLink
      to={path}
      style={({ isActive }) => (isActive ? { color: "red" } : null)}
    >
      {LinkName}
    </NavLink>
  );
};

export default ColorNavLink;
import React from "react";
import { Route, Routes } from "react-router-dom";
import ColorNavLink from "./ColorNavLink";
import About from "./About";
import Contact from "./Contact";
const Home = () => {
  return (
    <div>
      <h1>React Router Test Zone</h1>
      {ColorNavLink("/", "Home")}|{ColorNavLink("about", "About")} |
      {ColorNavLink("contact", "Contact")}
      <h2>Welcome!</h2>
      <Routes>
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
      </Routes>
    </div>
  );
};

export default Home;
  • path์™€ LinkName์„ ์ธ์ˆ˜๋กœ ํ• ๋‹นํ•˜๋ฉฐ customizingํ•˜์˜€๋‹ค.
  • ๋‹ค๋งŒ, NavLink๊ฐ€ ํ™œ์„ฑํ™”๋  ๋•Œ๋งˆ๋‹ค ๋‹ค๋ฅธ style์„ ์ ์šฉํ•  ๊ฒฝ์šฐ์—๋Š” ์ปค์Šคํ„ฐ๋งˆ์ด์ง•ํ•˜์ง€์•Š๊ณ  ์›ํ•˜๋Š” ์Šคํƒ€์ผ์„ ์ž…๋ ฅํ•ด์ค˜์•ผํ•œ๋‹ค.

๐Ÿ› ๏ธ ๊ธฐ์ˆ  ๋ฐ ๋ฐฉ๋ฒ•

No Match Route

App.js

import React from "react";
import { Route, Routes } from "react-router-dom";
import Home from "./routes/Home";
import About from "./routes/About";
import Contact from "./routes/Contact";
const App = () => {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about/*" element={<About />} />
        <Route path="contact" element={<Contact />} />
      </Routes>
    </div>
  );
};

export default App;

์ •์ƒ๊ฒฝ๋กœ


์—†๋Š”๊ฒฝ๋กœ


์—†๋Š” ๊ฒฝ๋กœ์— ์ ‘์†ํ–ˆ์„ ๋•Œ์— ์šฐ๋ฆฌ๋Š” ํฐ ํ™”๋ฉด์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
ํฐ ํ™”๋ฉด์ด ์•„๋‹ˆ๋ผ ์—†๋Š” ๊ฒฝ๋กœ์— ์ ‘์†ํ–ˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๋ ค์ฃผ๊ธฐ ์œ„ํ•ด No match Route๋ฅผ ๊ตฌํ˜„ํ•ด๋ณด์ž.

App.js

import React from "react";
import { Route, Routes } from "react-router-dom";
import Home from "./routes/Home";
import About from "./routes/About";
import Contact from "./routes/Contact";
import NoMatch from "./routes/NoMatch";
const App = () => {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about/*" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="/*" element={<NoMatch />} />
      </Routes>
    </div>
  );
};

export default App;

NoMatch.js

import React from "react";

const NoMatch = () => {
  return (
    <div>
      <h1>Not Found Page</h1>
      <p>์ž˜๋ชป๋œ ๊ฒฝ๋กœ๋กœ ๋“ค์–ด์˜ค์…จ์Šต๋‹ˆ๋‹ค!</p>
    </div>
  );
};

export default NoMatch;

์ž˜๋ชป๋œ ๊ฒฝ๋กœ

๋ฐฉ๋ฒ•์€ ๊ฐ„๋‹จํ•˜๋‹ค.
Route๋ฅผ ํ•˜๋‚˜ ๋งŒ๋“ค์–ด์ฃผ๊ณ  path="/" ๋ผ๊ณ  path prop์„ ์„ค์ •ํ•ด์ฃผ๋ฉด ๋œ๋‹ค.
"/
"์˜ ์˜๋ฏธ๋Š” ๋‚˜์˜ ๊ธฐ๋ณธ๊ฒฝ๋กœ๋ฅผ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€ ํ•˜์œ„ ๊ฒฝ๋กœ์— ํ• ๋‹น๋œ ์ปดํฌ๋„ŒํŠธ(NoMatch)๋ฅผ ๋ณด์—ฌ์ฃผ๊ฒ ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค.

์ฆ‰, ๊ฒฝ๋กœ์—์„œ "๋ณ„"์˜ ์˜๋ฏธ๋Š” "ํ•ด๋‹น๊ฒฝ๋กœ์˜ ๋ชจ๋“  ํ•˜์œ„ ๊ฒฝ๋กœ" ์ด๋‹ค.

NoMatch Route๋งŒ ๋”ฐ๋กœ ๊ตฌ๋ถ„ํ•ด์ฃผ๋ฉด ๋ชจ๋“  ํ•˜์œ„ ๊ฒฝ๋กœ์— NoMatch ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ณด์—ฌ์งˆ ๊ฒƒ์ด๋‹ค.

ํ•˜์ง€๋งŒ Routes๋ผ๋Š” ์ปดํฌ๋„ŒํŠธ๋กœ Route๋ฅผ ๊ฐ์‹ธ์ฃผ๋ฉด ๊ฒฝ๋กœ์— ๋งž๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์šฐ์„ ์ ์œผ๋กœ ๋ณด์—ฌ์ค€๋‹ค.

๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— /about์ด๋‚˜ /contact ๊ฒฝ๋กœ์— ๋“ค์–ด๊ฐ€๋ฉด NoMatch ์ปดํฌ๋„ŒํŠธ๋ณด๋‹ค ๊ฒฝ๋กœ๊ฐ€ ์ผ์น˜ํ•˜๋Š” About์ปดํฌ๋„ŒํŠธ๋‚˜ Contact ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์šฐ์„ ์ ์œผ๋กœ ๋ณด์—ฌ์ง€๋Š” ๊ฒƒ์ด๋‹ค.

reference
This route will match any URL, but will have the weakest precedence so the router will only pick it if no other routes match.
by NoMatch Route

/*์˜ ์˜๋ฏธ : ๋ชจ๋“  ๊ฒฝ๋กœ์— ๊ธฐ๋ณธ์ ์œผ๋กœ ํ• ๋‹นํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด์—ฌ์ฃผ๊ฒ ๋‹ค.
๋ณ„ => ํ•ด๋‹น ๊ฒฝ๋กœ์˜ ๋ชจ๋“  ํ•˜์œ„ ๊ฒฝ๋กœ

  • ๊ฒฝ๋กœ์—์„œ์˜ "๋ณ„"์€ NoMatch Route๋ฅผ ๊ตฌํ˜„ํ•  ๋•Œ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ•˜์œ„ ๊ฒฝ๋กœ์— ํ•ญ์ƒ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ• ๋‹นํ•  ๋•Œ์—๋„ ์“ฐ์ผ ์ˆ˜ ์žˆ๋‹ค.

์ •๋ฆฌ
NoMatch Route ๊ตฌํ˜„ํ•˜๋Š” ๋ฒ•
1. Routes์•ˆ์— NoMatch Route๋ฅผ ํ• ๋‹นํ•ด์ค€๋‹ค.

  • ์ด ๋•Œ Routes์•ˆ์—๋Š” NoMatch Route๋ฟ๋งŒ ์•„๋‹Œ ๋ณด์—ฌ์ ธ์•ผํ•  ๋‹ค๋ฅธ Route๋“ค๋„ ๊ฐ™์ด ๋„ฃ์–ด์ค€๋‹ค.
  1. NoMatch Route์˜ ๊ฒฝ๋กœ๋Š” path="/*"๋กœ ์„ค์ •ํ•ด์ค€๋‹ค.
  • ๊ธฐ๋ณธ ๊ฒฝ๋กœ์˜ ๋ชจ๋“  ํ•˜์œ„ ๊ฒฝ๋กœ์— NoMatch ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด์—ฌ์ฃผ๊ฒ ๋‹ค.
    (์„ค์ •ํ•œ ๊ฒฝ๋กœ๋ฅผ ์ œ์™ธํ•˜๊ณ ๋Š”)

Nested Routes

์šฐ๋ฆฌ๊ฐ€ ํ•˜์œ„ ๊ฒฝ๋กœ์— ๋“ค์–ด๊ฐ€๋”๋ผ๋„ ์ƒ์œ„ ๊ฒฝ๋กœ์˜ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ•ญ์ƒ ๋ณด์ด๊ฒŒ ํ•˜๊ณ  ์‹ถ์„ ๋•Œ๋Š” ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ๊นŒ?

๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

Route๋ฅผ ์ค‘์ฒฉํ•ด์ค€๋‹ค.(Nest Routes)

ํ•ญ์ƒ ๋ณด์ด๊ฒŒ ํ•˜๊ณ  ์‹ถ์€ ์ปดํฌ๋„ŒํŠธ(์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ)์˜ Route๋กœ ๋‚˜๋จธ์ง€ children์„ ๊ฐ์‹ธ์ฃผ๋ฉด ๋œ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด์„œ, ๋ฐ‘์— ์˜ˆ์ œ์—์„œ ํ•˜์œ„๊ฒฝ๋กœ์— ๊ฐ€๋”๋ผ๋„ Home ์ปดํฌ๋„ŒํŠธ๋Š” ํ•ญ์ƒ ๋ณด์ด๊ฒŒ ํ•˜๊ณ  ์‹ถ์€ ์ƒํ™ฉ์ด๋ผ๊ณ  ํ•˜์ž.

import React from "react";
import { Route, Routes } from "react-router-dom";
import Home from "./routes/Home";
import About from "./routes/About";
import Contact from "./routes/Contact";
import NoMatch from "./routes/NoMatch";
const App = () => {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about/*" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="/*" element={<NoMatch />} />
      </Routes>
    </div>
  );
};

export default App;

์œ„ ์˜ˆ์ œ๋ฅผ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ณ€๊ฒฝํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

import React from "react";
import { Route, Routes } from "react-router-dom";
import Home from "./routes/Home";
import About from "./routes/About";
import Contact from "./routes/Contact";
import NoMatch from "./routes/NoMatch";
const App = () => {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />}>
          <Route path="about/*" element={<About />} />
          <Route path="contact" element={<Contact />} />
        </Route>
        <Route path="*" element={<NoMatch />} />
      </Routes>
    </div>
  );
};

export default App;

Home Route๋กœ ํ•˜์œ„ ๊ฒฝ๋กœ์— ์žˆ๋Š” Route๋ฅผ ๊ฐ์‹ธ์ฃผ๋ฉด ๋œ๋‹ค.


์—ฌ๊ธฐ์„œ ๋์ด ์•„๋‹ˆ๋ผ ๋‹ค์Œ์œผ๋กœ Home ์ปดํฌ๋„ŒํŠธ์— Outlet์ด๋ผ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ• ๋‹นํ•ด์ค˜์•ผํ•œ๋‹ค.

Outlet
This means the route will still render its children even without an explicit element prop, so you can nest route paths without nesting UI around the child route elements.
์ •ํ™•ํžˆ ๊ฒฝ๋กœ๊ฐ€ ์ผ์น˜ํ•˜์ง€์•Š์•„๋„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ค‘์ฒฉํ•จ์œผ๋กœ์จ ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ์ด๋‹ค.
๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์€ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์— Outlet์„ ํ• ๋‹นํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

import React from "react";
import { Outlet, Route, Routes } from "react-router-dom";
import ColorNavLink from "./ColorNavLink";
import About from "./About";
import Contact from "./Contact";
const Home = () => {
  return (
    <div>
      <h1>React Router Test Zone</h1>
      {ColorNavLink("/", "Home")}|{ColorNavLink("about", "About")}|
      {ColorNavLink("contact", "Contact")}
      <h2>Welcome!</h2>
      <Outlet />
    </div>
  );
};

export default Home;

์ด๋Ÿฌํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ํ•˜์œ„๊ฒฝ๋กœ์— ๋“ค์–ด๊ฐ„๋‹คํ•˜๋”๋ผ๋„ Home ์ปดํฌ๋„ŒํŠธ(์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ)๊ฐ€ ํ•ญ์ƒ ๋ณด์ด๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค.

๊ธฐ๋ณธ๊ฒฝ๋กœ

/about

/contact

์ •๋ฆฌ
Nest Routes ํ•˜๋Š” ๋ฐฉ๋ฒ•
1. ๋ณด์ด๊ฒŒ ํ•˜๊ณ  ์‹ถ์€ ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ๋กœ ํ•˜์œ„ ๊ฒฝ๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ์‹ธ์ค€๋‹ค.
2. ์ƒ์œ„์ปดํฌ๋„ŒํŠธ์— Outlet ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ• ๋‹นํ•ด์ค€๋‹ค.

๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์œผ๋กœ๋Š” ๊ฒฝ๋กœ์— "๋ณ„"์„ ์ด์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค.
์ด๋„ Nest Routes๋ฅผ ํ•˜๋Š” ๋ฐฉ๋ฒ• ์ค‘ ํ•˜๋‚˜์ด์ง€๋งŒ ๊ณต์‹๋ฌธ์„œ์—์„œ๋Š” ์ฒซ๋ฒˆ์งธ ๋ฐฉ๋ฒ•์„ ๊ถŒ์žฅํ•˜๊ณ  ์žˆ๋‹ค.

์•„๋งˆ ๊ทธ ์ด์œ ๋Š” ๊ฒฝ๋กœ์— "๋ณ„"์„ ์“ฐ๋Š” ๋ฐฉ๋ฒ•์€ ์—†๋Š” ๊ฒฝ๋กœ์—๋„ ๋ถ€๋ชจ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด์—ฌ์ฃผ๊ธฐ ๋•Œ๋ฌธ์ด๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

"๋ณ„"์„ ์“ฐ๋ฉด ๋ถ€๋ชจ๊ฒฝ๋กœ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋ชจ๋“  ํ•˜์œ„ ๊ฒฝ๋กœ์— ํ•ด๋‹น ๋ถ€๋ชจ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด์—ฌ์ฃผ๊ฒŒ ๋œ๋‹ค.

๋•Œ๋ฌธ์— ์—†๋Š” ๊ฒฝ๋กœ์— ๋“ค์–ด๊ฐ€๋”๋ผ๋„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ฒซ๋ฒˆ์งธ ๋ฐฉ๋ฒ•์„ ๋” ์„ ํ˜ธํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

params

url์˜ params๋ž€ ๋ฌด์—‡์ธ๊ฐ€?
url์˜ ๊ฒฝ๋กœ๋ฅผ ๋™์ ์œผ๋กœ ์กฐ์ž‘ํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ๋Šฅ์ด๋‹ค.
์ •์ ์œผ๋กœ ๊ฒฝ๋กœ๋ฅผ ์ผ์ผํžˆ ์ง€์ •ํ•˜์—ฌ ๋ผ์šฐํŒ…ํ•ด์ฃผ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์ง€์ •ํ•˜์ง€ ์•Š์€ ๊ฒฝ๋กœ์— ๋“ค์–ด๊ฐ€๋„ ๋ผ์šฐํŒ…๋˜๊ฒŒ ํ•ด์ค€๋‹ค.

์™œ ์‚ฌ์šฉํ•˜๋Š”๊ฐ€?
์–ด๋– ํ•œ ๊ฒฝ๋กœ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•˜์—ฌ ํ•˜์œ„ ๊ฒฝ๋กœ๋งˆ๋‹ค ๊ฐ๊ฐ ๋‹ค๋ฅธ ๋ฐ์ดํ„ฐ๋“ค์„ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

์ด ๋•Œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ๊ฐ ๋ผ์šฐํŒ…ํ•ด์ฃผ๋Š” ๊ฒƒ๋ณด๋‹ค params๋ฅผ ์ด์šฉํ•˜์—ฌ ๋™์ ์œผ๋กœ ๋ผ์šฐํŒ…ํ•ด์ฃผ๋Š” ๊ฒƒ์ด ๊ฐ€๋…์„ฑ ๋ฐ ์œ ์ง€๋ณด์ˆ˜์— ํŽธ๋ฆฌํ•จ์„ ์ฃผ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

๋‹ค์Œ ์˜ˆ์ œ๋ฅผ ๋ณด์ž.

import React, { useEffect, useState } from "react";
import { Route, Routes } from "react-router-dom";
import Home from "./routes/Home";
import About from "./routes/About";
import Contact from "./routes/Contact";
import NoMatch from "./routes/NoMatch";
import User from "./routes/User";

const App = () => {
  const users = [
    { position: "user1", userId: 1, name: "mark" },
    { position: "user2", userId: 2, name: "cavin" },
    { position: "user3", userId: 3, name: "merry" },
  ];

  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />}>
          <Route path="about" element={<About users={users} />}>
            {users.map((user) => {
              return (
                <Route
                  key={user.userId}
                  path={user.position}
                  element={<User />}
                />
              );
            })}
          </Route>
          <Route path="contact" element={<Contact />} />
        </Route>
        <Route path="*" element={<NoMatch />} />
      </Routes>
    </div>
  );
};

export default App;

์œ„ ์˜ˆ์ œ์—์„œ๋Š” AboutํŽ˜์ด์ง€์—์„œ array.prototype.map๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ user๋ฅผ ๋ผ์šฐํŒ…ํ•ด์ฃผ๊ณ  ์žˆ๋‹ค.

ํ•˜์ง€๋งŒ params๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

import React, { useEffect, useState } from "react";
import { Route, Routes } from "react-router-dom";
import Home from "./routes/Home";
import About from "./routes/About";
import Contact from "./routes/Contact";
import NoMatch from "./routes/NoMatch";
import User from "./routes/User";

const App = () => {
  const users = [
    { position: "user1", userId: 1, name: "mark" },
    { position: "user2", userId: 2, name: "cavin" },
    { position: "user3", userId: 3, name: "merry" },
  ];

  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />}>
          <Route path="about" element={<About users={users} />}>
            <Route path=":usernumber" element={<User />} />
          </Route>
          <Route path="contact" element={<Contact />} />
        </Route>
        <Route path="*" element={<NoMatch />} />
      </Routes>
    </div>
  );
};

export default App;

data๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์—ฌ๋Ÿฌ Route๋ฅผ ๋งตํ•‘ํ•˜์ง€์•Š๊ณ  params๋กœ ๋™์ ์œผ๋กœ ์กฐ์ž‘ํ•˜์—ฌ ํ•œ์ค„์˜ Route๋กœ๋งŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

์‚ฌ์šฉ๋ฒ•

์œ„์˜ ์˜ˆ์ œ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ์‚ฌ์šฉ๋ฒ•์„ ์‚ดํŽด๋ณด๊ฒ ๋‹ค.

(
    <div>
      <Routes>
        <Route path="/" element={<Home />}>
          <Route path="about" element={<About users={users} />}>
            <Route path=":usernumber" element={<User />} />
          </Route>
          <Route path="contact" element={<Contact />} />
        </Route>
        <Route path="*" element={<NoMatch />} />
      </Routes>
    </div>
  );

about๊ฒฝ๋กœ๋ฅผ ๊ธฐ์ค€์œผ๋กœ usenumber๋ผ๋Š” param์„ ํ• ๋‹นํ•ด์ฃผ์—ˆ๋‹ค.
์ด ๋•Œ about๊ฒฝ๋กœ์—์„œ ์–ด๋–ค ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•˜์—ฌ๋„ User๋ผ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด์—ฌ์ฃผ๊ฒŒ ๋œ๋‹ค. (์ด๊ฒƒ์ด ๋™์ ์œผ๋กœ url์„ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์˜๋ฏธ)

์ผ์น˜ํ•˜์ง€์•Š์€ url์ด ์žˆ๋‹ค๋ฉด ๋นˆ ํ™”๋ฉด์ด๊ฑฐ๋‚˜ NoMatch ํ™”๋ฉด์ด ๋‚˜ํƒ€๋‚˜๊ฑฐ๋‚˜ ํ•ด์•ผํ•˜์ง€๋งŒ params๋ฅผ ์„ค์ •ํ•ด์ค€๋‹ค๋ฉด ํ• ๋‹นํ•œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋‚˜ํƒ€๋‚œ๋‹ค.

์ด๋ฅผ ํ†ตํ•ด ์—ฌ๋Ÿฌ Route๋ฅผ ์ผ์ผํžˆ ์„ค์ •ํ•ด์ฃผ์ง€ ์•Š์•„๋„ ๋œ๋‹ค๋Š” ์žฅ์ ์„ ์ง€๋‹ˆ๊ฒŒ ๋œ๋‹ค.

url params ์‚ฌ์šฉํ•˜๊ธฐ
๋‚ด๊ฐ€ ๋™์ ์œผ๋กœ ์ž…๋ ฅํ•œ url param์„ ์ด์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด useParams๋ผ๋Š” ํ›…์„ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

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

const params  = useParams
console.log(params) 

useParams ํ›…์„ ๋ถˆ๋Ÿฌ์˜ค๋ฉด ๋‚ด๊ฐ€ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” params๋ฅผ ๋ชจ์•„๋‘” ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•ด์ค€๋‹ค.

์•„๊นŒ ์œ„์—์„œ ์ง€์ •ํ•ด์ค€ usernumber๋ผ๋Š” params์™€ ๋“ค์–ด๊ฐ„ ๊ฒฝ๋กœ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๊ฐ์ฒด๋กœ ๋ณด์—ฌ์ฃผ๊ณ  ์žˆ๋‹ค.

url params๋Š” ํ•ญ์ƒ ๋ฌธ์ž์—ด์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€์ ธ์™€์•ผํ•  params๊ฐ€ ์ˆซ์ž๋ผ๋ฉด ๊ฐ€์ ธ์˜ฌ ๋•Œ ์ˆซ์žํ™”์‹œ์ผœ์„œ ๊ฐ€์ ธ์™€์•ผํ•œ๋‹ค. ex) parseInt()

์ ‘์†ํ•œ ๊ฒฝ๋กœ์˜ ์ด๋ฆ„์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒ ๋‹ค.

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

const User = () => {
  const params = useParams();
  console.log(params);
  return (
    <div>
      <h1>User Number : {params.usernumber}</h1>
    </div>
  );
};

export default User;

์œ„์™€ ๊ฐ™์ด ์„ค์ •ํ•ด์ค€๋‹ค๋ฉด param ๊ฒฝ๋กœ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.


user1๊ฒฝ๋กœ์— ์ ‘์†ํ•˜๋‹ˆ user1์ด๋ผ๋Š” ๊ฒฝ๋กœ๋ฅผ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚ด๊ณ  user2 ๊ฒฝ๋กœ์— ์ ‘์†ํ•˜๋‹ˆ user2๋ผ๋Š” ๊ฒฝ๋กœ๋ฅผ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚ธ๋‹ค.

์ด๋ ‡๊ฒŒ ๋™์ ์œผ๋กœ ๋งŽ์€ ์–‘์ด Route๋ฅผ ์ง€์ •ํ•˜๊ณ  ์‹ถ์„ ๋•Œ์—๋Š” route params๋ฅผ ํ™œ์šฉํ•˜๋ฉด ์ข‹๋‹ค๊ณ  ์ƒ๊ฐ๋œ๋‹ค.

์ •๋ฆฌ
params๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•
1. Route path prop์— ":paramname"์„ ํ• ๋‹นํ•œ๋‹ค.
<Route path =":paramname" element ={<Component/>}/>
2. paraname์„ ํ™œ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด useParamsํ›…์„ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฌ์šฉํ•œ๋‹ค.
const params = useParams()

Index Routes

Route์ปดํฌ๋„ŒํŠธ์˜ prop๊ฐ’์œผ๋กœ index๋ผ๋Š” ๊ฐ’์„ ๋„ฃ์–ด์ฃผ๋Š” ๊ฒƒ์ด๋‹ค.
index์˜ ์—ญํ• ์€ ๋ถ€๋ชจ ๊ฒฝ๋กœ์— ๋“ค์–ด๊ฐ”์„ ๋•Œ ๋ณด์—ฌ์ค„ element์„ ์ง€์ •ํ•˜๋Š”๊ฒƒ์ด๋‹ค.

์—ฌ๋Ÿฌ๊ฐ€์ง€ ํ•˜์œ„๊ฒฝ๋กœ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๋ถ€๋ชจ๊ฒฝ๋กœ๊ฐ€ ์žˆ๋‹ค๊ณ  ํ•˜์ž.
์ด ๋•Œ ๋ถ€๋ชจ๊ฒฝ๋กœ์— ๋“ค์–ด๊ฐ”์„ ๋•Œ ๋ณด์—ฌ์ง€๋Š” element๊ฐ€ ์žˆ์–ด์•ผํ•œ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ํ•˜์œ„ ๊ฒฝ๋กœ๋กœ ๋“ค์–ด๊ฐ”์„ ๋•Œ item๋“ค์„ ๋ณด์—ฌ์ค€๋‹ค๊ณ  ํ•˜์˜€์„ ๋•Œ ๋ถ€๋ชจ๊ฒฝ๋กœ์— ๋“ค์–ด๊ฐ”์„ ๋•Œ Select the Item!์ด๋ผ๋Š” element๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ๋‹ค๊ณ  ํ•˜์ž.

์ด ๋•Œ ํ•ด๋‹น element๋Š” ์ƒ์œ„ ๊ฒฝ๋กœ๋กœ ๋“ค์–ด๊ฐ”์„ ๋•Œ ๋ณด์—ฌ์•ผํ•˜๊ณ  ํ•˜์œ„๊ฒฝ๋กœ๋กœ ๋“ค์–ด๊ฐ”์„ ๋•Œ์—๋Š” ์•ˆ๋ณด์—ฌ์•ผํ•œ๋‹ค.

์ด๋Ÿด ๋•Œ index prop์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด๋‹ค.
๋ถ€๋ชจ Route๋กœ ํ•˜์œ„ Route๋ฅผ Nestํ–ˆ์„ ๊ฒฝ์šฐ ํ•˜์œ„ Route ์ค‘ ํ•˜๋‚˜์— path๋ฅผ ์ž…๋ ฅํ•ด์ค„ ํ•„์š”์—†์ด index prop๋งŒ ํ• ๋‹นํ•ด์ฃผ๊ณ  element๋ฅผ ํ• ๋‹นํ•ด์ค€๋‹ค.

์˜ˆ์‹œ

<Route path ="/invoices" element = {<Invoices/>}>
  <Route index element = {<h1>Select the Invoice!</h1>}
  <Route path =":invoiceId" element = {<Invoice/>}/>
</Route>

์œ„ ์˜ˆ์‹œ์—์„œ invoices๋ผ๋Š” ๊ฒฝ๋กœ์— ๋“ค์–ด๊ฐ”์„ ๋•Œ Invoices์ปดํฌ๋„ŒํŠธ๊ฐ€ Outlet๋˜๋ฉฐ ๋ณด์—ฌ์งˆ ๊ฒƒ์ด๋ฉฐ ํ•˜์œ„ ๊ฒฝ๋กœ๋กœ ๋“ค์–ด๊ฐ„๋‹คํ•˜์—ฌ Invoices ์ปดํฌ๋„ŒํŠธ๋‚ด์šฉ์€ ๋ณด์—ฌ์งˆ ๊ฒƒ์ด๋‹ค.

ํ•˜์ง€๋งŒ ๋ถ€๋ชจ๊ฒฝ๋กœ์—์„œ๋Š” ๋ณด์—ฌ์ง€๊ณ  ํ•˜์œ„ ๊ฒฝ๋กœ๋กœ ๋“ค์–ด๊ฐ”์„ ๋•Œ ์‚ฌ๋ผ์งˆ element๊ฐ€ ํ•„์š”ํ•  ๋•Œ ์œ„์™€ ๊ฐ™์ด index prop์„ ํ™œ์šฉํ•ด์ฃผ๋ฉด ๋˜๋Š” ๊ฒƒ์ด๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด ์ฒ˜์Œ invoices๋ผ๋Š” ์ƒ์œ„ ๊ฒฝ๋กœ์— ๋“ค์–ด๊ฐ”์„ ๋•Œ Select the voice๋ผ๋Š” ๋ฌธ๊ตฌ๊ฐ€ ๋ณด์—ฌ์ง€๊ณ  ํ•˜์œ„ ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•˜์˜€์„ ๋•Œ์—๋Š” ํ•ด๋‹น ๋ฌธ๊ตฌ๊ฐ€ ๋ณด์ด์ง€ ์•Š๊ฒŒ ๋  ๊ฒƒ์ด๋‹ค.

index prop์„ ํ™œ์šฉํ•˜์ง€ ์•Š๋”๋ผ๋„ ๋”ฐ๋กœ invoices Route์•ˆ์— invoices Route๋ฅผ ๋งŒ๋“ค์–ด์ฃผ๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ๊ฒ ์ง€๋งŒ ์ด๋Š” ๊ฐ€๋…์„ฑ์„ ํ•ด์น  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์ข‹์€ ๋ฐฉ๋ฒ•์€ ์•„๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ, ์ƒํ™ฉ์— ๋”ฐ๋ผ element๋ฅผ ๋ณด์—ฌ์ง€๊ฒŒ ํ•˜๊ฑฐ๋‚˜ ์‚ฌ๋ผ์ง€๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด์„œ index prop์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ œ์‹œํ•  ์ˆ˜ ์žˆ๊ฒ ๋‹ค.

useSearchParams

const [searchParams,setSearchParams] = useSearchParams()

useSearchParams๋Š” ํ˜„์žฌ location์— ๋Œ€ํ•˜์—ฌ url์— query string์„ ์ฝ๊ณ  ๋ณ€๊ฒฝํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋œ๋‹ค.

useSearchParams๋Š” useState hook์ฒ˜๋Ÿผ ๋‘๊ฐœ์˜ ๊ฐ’์„ ๋‹ด์€ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

searchParams : ํ˜„์žฌ location์˜ search params
setSearchParams : searchParams๋ฅผ ์—…๋ฐ์ดํŠธ ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜

์ฐธ์กฐ :

profile
๊ฐœ๋ฐœ์ž์—ฌ์„œ ํ–‰๋ณตํ•œ Jev ๐Ÿ˜™ FE DEVELOPER JEV

0๊ฐœ์˜ ๋Œ“๊ธ€