Route , Link, useNavigate

jhplus13ยท2022๋…„ 2์›” 21์ผ
2

React

๋ชฉ๋ก ๋ณด๊ธฐ
7/28

react-router-dom

: ํŽ˜์ด์ง€ ์ƒˆ๋กœ๊ณ ์นจ ํ•  ํ•„์š” ์—†์ด, ํŽ˜์ด์ง€์— ํ•„์š”ํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถˆ๋Ÿฌ์™€ ๋ Œ๋”๋ง ํ•˜๋„๋ก ๋„์™€์คŒ.(spa)

  • spa(single page application) ์ด๋ž€?
    :๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•  ๋•Œ๋งˆ๋‹ค ๋งค๋ฒˆ ์„œ๋ฒ„์—์„œ ๋ฆฌ์†Œ์Šค ๋ฐ›์•„ ํ™”๋ฉด์— ๋ณด์—ฌ์ฃผ๋ฉด,
    ๋ฐ”๋€Œ์ง€ ์•Š๋Š” ๋ถ€๋ถ„๊นŒ์ง€๋„ ์ƒˆ๋กœ ๋ถˆ๋Ÿฌ์™€์„œ ๋ณด์—ฌ์ค˜์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ถˆํ•„์š”ํ•œ ๋กœ๋”ฉ์ด ์žˆ์–ด ๋น„ํšจ์œจ์ ์ž„.
    ๊ทธ๋Ÿฌ๋‚˜ spa๋ฅผ ์ด์šฉํ•˜๋ฉด ์„œ๋ฒ„์— ์š”์ฒญํ•  ํ•„์š” ์—†์ด, ํ•œ ํŽ˜์ด์ง€์—์„œ ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ์—…๋ฐ์ดํŠธํ•˜๊ฒŒ ๋จ.

๐Ÿ”ถBrowserRouter

  • history API๋ฅผ ์‚ฌ์šฉํ•ด URL๊ณผ UI๋ฅผ ๋™๊ธฐํ™”ํ•˜๋Š” ๋ผ์šฐํ„ฐ

  • "Route์—์„œ ์„ค์ •ํ•œ ํ˜„์žฌ ๊ฒฝ๋กœ(path)"์™€ "์ปดํฌ๋„ŒํŠธ์—์„œ ์„ค์ •๋œ URL"์ด ์ผ์น˜ํ•˜๋ฉด ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•œ๋‹ค.

๐Ÿ”ถRoutes(์˜›๋‚ Switch)

  • ์ž์‹ ์ปดํฌ๋„ŒํŠธ Route ๋˜๋Š” Redirect์ค‘ ๋งค์น˜๋˜๋Š” ์ฒซ ๋ฒˆ์งธ ์š”์†Œ๋ฅผ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.

  • Routes๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด BrowserRouter๋งŒ ์‚ฌ์šฉํ•  ๋•Œ์™€ ๋‹ค๋ฅด๊ฒŒ, ๋งค์นญ๋˜๋Š” ํ•˜๋‚˜์˜ ์š”์†Œ๋งŒ ๋ Œ๋”๋งํ•œ๋‹ค๋Š” ์ ์„ ๋ณด์žฅํ•ด์ค๋‹ˆ๋‹ค. ์‚ฌ์šฉํ•˜์ง€ ์•Š์„ ๊ฒฝ์šฐ ๋งค์นญ๋˜๋Š” ๋ชจ๋‘๋ฅผ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.

  • ํ•˜๋‚˜์˜ route์— ํ•˜๋‚˜์˜ ๊ฒฝ๋กœ๋งŒ ๋ณด์—ฌ์ฃผ๊ฒŒ ๋จ.

  • ์‚ฌ์šฉ์ž์˜ url์ฃผ์†Œ์— ๋”ฐ๋ผ ์–ด๋–ค ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”ํ• ์ง€ ๊ฒฐ์ •๋จ.
    (์œ ์ €์˜ ๊ฒฝ๋กœ๊ฐ€ "/"์ด๋ฉด home ์ปดํฌ๋„ŒํŠธ ๋ Œ๋”, "/movie"์ด๋ฉด Detail ์ปดํฌ๋„ŒํŠธ ๋ Œ๋”ํ•จ)

๐Ÿ”ถRoute

  • url๋ฅผ ์˜๋ฏธํ•จ
  • Route ์ปดํฌ๋„ŒํŠธ ์“ธ๋•Œ๋งŒ! , path์— :๋ณ€์ˆ˜ ๋ฅผ ์“ธ ์ˆ˜ ์žˆ์Œ.
    (์ดํ›„ ์—ฐ๊ฒฐ๋œ ์ปดํฌ๋„ŒํŠธ ์•ˆ์—์„œ useParams๋ฅผ ์“ฐ๋ฉด, ์ด ๋ณ€์ˆ˜๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๊ฒŒ ๋จ.)

๐Ÿ”† ์˜ˆ์ œ์ฝ”๋“œ ๐Ÿ”†

์–ด๋–ค ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•˜๋”๋ผ๋„, Nav์™€ Footer๋Š” ๊ณ ์ •๋˜์„œ ๋‚˜์˜ค๊ฒŒ๋” ๋จ.

function Router() {
  return (
    <BrowserRouter>
      <Nav /> 
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/main" element={<Main />} />
      </Routes>
      <Footer /> 
    </BrowserRouter>
  );
}

๐Ÿ”ถ useParams

  • Route์˜ path์— ์“ด "๋ณ€์ˆ˜๋ช…"์„ , ํ•ด๋‹น path์— ์—ฐ๊ฒฐ๋œ ์ปดํฌ๋„ŒํŠธ์—์„œ
    "useParams"๋ฅผ ์“ฐ๋ฉด, path์— ์ž…๋ ฅ๋œ ๋ณ€์ˆ˜๋ฅผ ๋ฐ›์•„์˜ฌ ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ”† Router ์™€ useParams() ์‚ฌ์šฉ, ์ฝ”๋“œ์˜ˆ์‹œ ๐Ÿ”†

<App> ์ปดํฌ๋„ŒํŠธ
: ์ฃผ์†Œ์ฐฝ์— "/movie/์•„๋ฌด๊ฑฐ๋‚˜" ์ž…๋ ฅํ–ˆ์„ ๋•Œ, Detail ์ปดํฌ๋„ŒํŠธ ๋ณด์—ฌ๋‹ฌ๋ผ๋Š” ๋œป์ž„.

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./routes/Home";
import Detail from "./routes/Detail";

// 1.Route๋ฅผ ์ด์šฉํ•ด ๊ฒฝ๋กœ๋งˆ๋‹ค ํ•ด๋‹น๋˜๋Š” ์ปดํฌ๋„ŒํŠธ ์—ฐ๊ฒฐํ•ด์คŒ
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/movie/:id" element={<Detail />} />
      </Routes>
    </BrowserRouter>
  );
}

<Detail> ์ปดํฌ๋„ŒํŠธ
: " /:id " โ† id์— ์œ ์ €๊ฐ€ ์ž…๋ ฅํ•œ ๊ฐ’์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์Œ.

// 2. Detail์ปดํฌ๋„ŒํŠธ๋Š” ๊ฒฝ๋กœ์— ๋ณ€์ˆ˜๊ฐ€ ์žˆ์Œ. useParams()๋ฅผ ์ด์šฉํ•ด ๊ทธ ๋ณ€์ˆ˜๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์Œ.
import { useParams } from "react-router-dom";

function Detail() {
  console.log(useParams()); // {id: '25833'}
  // ํ•ด๋‹น ๊ฒฝ๋กœ์— ์—ฐ๊ฒฐ๋œ ์ปดํฌ๋„ŒํŠธ์ธ Detail์—์„œ, useParam๋ฅผ ์“ฐ๋ฉด, 
  // Route์˜ path์— ์ž…๋ ฅ๋œ ๋ณ€์ˆ˜๋ฅผ ๋ฐ›์•„์˜ฌ ์ˆ˜ ์žˆ๋‹ค.
  
 // ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์œผ๋กœ id ๋ณ€์ˆ˜์— useParams์˜ ๊ฐ์ฒด๋ฅผ ํ• ๋‹นํ•จ.
 const { id } = useParams(); // id ๊ฐ’์ด ๋‚˜์˜จ๋‹ค!

}

  • <a>ํƒœ๊ทธ์™€ ๋น„์Šทํ•จ.
    aํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด ํ–ˆ์œผ๋ฉด <a href="/movie/id">{title}</a> ์ด๋Ÿฐ์‹.
    โ†’ aํƒœ๊ทธ๋Š” ํŽ˜์ด์ง€ ์ „์ฒด๊ฐ€ ๋‹ค์‹œ ์‹คํ–‰๋˜๊ฒŒ ๋จ. (spa ๊ตฌํ˜„x)

  • to์†์„ฑ์— ์„ค์ •๋œ ๋งํฌ๋กœ ์ด๋™ํ•จ

  • ๋ธŒ๋ผ์šฐ์ €์˜ "์ƒˆ๋กœ๊ณ ์นจ ์—†์ด"๋„, ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ์ด๋™์‹œ์ผœ์ฃผ๋Š” ์ปดํฌ๋„ŒํŠธ์ž„! (spa ๊ตฌํ˜„ใ…‡)

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

function Movies({ id, title }) {
  return (
    <> 
    // title์„ ๋ˆ„๋ฅด๋ฉด, `/movie/${id}` ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•˜๊ฒŒ ๋จ.
        <Link to={`/movie/${id}`}>
           <h1>{title}</h1>
        </Link>
    </>
  );
}

๐Ÿ”ถ useNavigate()

: ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ด์„œ ํŽ˜์ด์ง€๋ฅผ ์ด๋™ํ•˜๋Š” ๋ฐฉ๋ฒ•์ž„
: ๋กœ๊ทธ์ธ ํผ์—์„œ ์œ ํšจ์„ฑ ์ถฉ์กฑ์‹œ ์ด๋™ํ•  ๋•Œ ์“ฐ์ž„

  • ์‚ฌ์šฉ๋ฒ•
  1. ํŽ˜์ด์ง€ ์ด๋™ํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” ๋„ค๋น„๊ฒŒ์ดํŠธ ํ•จ์ˆ˜๊ฐ€ ๋ฐ˜ํ™˜๋จ. ์ด ํ•จ์ˆ˜๋ฅผ ๋ณ€์ˆ˜์— ๋‹ด๊ณ ,
  2. ๊ฒฝ๋กœ๋ฅผ ์„ค์ •ํ•ด์ฃผ๊ณ 
  3. ํ•ด๋‹น ์š”์†Œ์— ๊ฐ–๋‹ค ์”€.
  • ์‚ฌ์šฉ์˜ˆ์ œ
import { useNavigate } from "react-router-dom";

const Login = () => {
  const [userInfo, setUserInfo] = useState({ userId: "", userPw: "" });
  const navigate = useNavigate(); // 1. ํ•จ์ˆ˜ ํ˜ธ์ถœํ›„

  const inputChange = (e) => {
    const { name, value } = e.target;
    setUserInfo((prev) => ({ ...prev, [name]: value }));
  };

  const loginSucces = (e) => {
    if (userInfo.userId && userInfo.userPw) {
      navigate("/list"); // 2. ๊ฒฝ๋กœ์„ค์ •
    }
  };
  
  return (
	 <button type="button" onClick={loginSucces}> ๋กœ๊ทธ์ธ </button>
   );
};

์ฐธ๊ณ ํฌ์ŠคํŒ…
https://velog.io/@sham/react-router-dom-v6%EB%A1%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%EB%8F%99%ED%95%98%EA%B8%B0

๐Ÿ”ถ nested routes

  • ์œ ์‚ฌํ•œ ์„œ๋ธŒํŽ˜์ด์ง€๋“ค์ด ๋งŽ์ด ํ•„์š”ํ•  ๋•Œ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋จ.
  1. <Route>์•ˆ์— ๋˜ <Route>๋ฅผ ๋„ฃ์„ ์ˆ˜ ์žˆ๋Š”๋ฐ ์ด๊ฑธ Nested routes ๋ผ๊ณ ํ•จ.

  2. : "/event/one" ์ ‘์†์‹œ <Event> ์™€ <div>์ฒซ ์ฃผ๋ฌธ์‹œ</div>๋ฅผ ๊ฐ™์ด ๋ณด์—ฌ์ฃผ๊ณ ,
    : "/event/two" ์ ‘์†์‹œ <Event> ์™€ <div>์ƒ์ผ๊ธฐ๋…</div>๋ฅผ ๊ฐ™์ด ๋ณด์—ฌ์ค€๊ฒŒ ๋œ๋‹ค.

  3. nesting๋˜์žˆ๋Š” ์š”์†Œ(divํƒœ๊ทธ) ๋ฅผ ๋ Œ๋”ํ•˜๊ธฐ์œ„ํ•ด ์œ„์น˜๋ฅผ ์ง€์ •ํ•ด ์ค˜์•ผํ•œ๋‹ค.
    ์ด๋ฅผ ์œ„ํ•ด Event ์ปดํฌ๋„ŒํŠธ ์•ˆ์—์„œ Outletํƒœ๊ทธ๋กœ ์œ„์น˜๋ฅผ ์ง€์ •ํ•ด ์ค˜์•ผ ํ•œ๋‹ค.

๐Ÿ”† ์‚ฌ์šฉ์˜ˆ์ œ

function App (){
  <Routes>
      <Route path="/event" element={<Event />}> // 1.
          <Route path="one" element={<div>์ฒซ ์ฃผ๋ฌธ์‹œ ์–‘๋ฐฐ์ถ”์ฆ™ ์„œ๋น„์Šค</div>} /> // 2-1.
          <Route path="two" element={<div>์ƒ์ผ๊ธฐ๋… ์ฟ ํฐ๋ฐ›๊ธฐ</div>} /> // 2-2.
      </Route>
  </Routes>
}
function Event() {
  return (
    <>
      <h1>์˜ค๋Š˜์˜ ์ด๋ฒคํŠธ</h1>
      <Outlet></Outlet> // 3. 
    </>
  );
}

profile
Front-end Dev

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