[React] 라우터(Router)

Jul 06, 2024

Contents

1. react-router-dom 설치 2. 페이지 연결하기 3. url 매개변수 가져오기 4. 쿼리스트링

1. react-router-dom 설치

💡

react-router-dom은 React 애플리케이션에서 클라이언트 사이드 라우팅을 구현하는 데 사용되는 라이브러리이다. 이를 통해 사용자는 브라우저의 주소창 URL을 변경함으로써 서로 다른 페이지나 컴포넌트로 이동할 수 있따. react-router-dom은 싱글 페이지 애플리케이션(SPA)에서 라우팅을 처리하는 데 매우 유용하다.

npm: react-router-dom

Declarative routing for React web applications. Latest version: 6.23.1, last published: a month ago. Start using react-router-dom in your project by running `npm i react-router-dom`. There are 21675 other projects in the npm registry using react-router-dom.

https://www.npmjs.com/package/react-router-dom

nav/Rounter.js


import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

function Router() {
    return (
        <BrowserRouter>
        <Routes>
            <Route path="/" element={} />
            <Route path="/about" element={} />
        </Routes>
        </BrowserRouter>
    );
}

export default Router;

Home.js


import React from 'react';

function Home(props) {
    return (
        <div>
          <h1>Home</h1>  
        </div>
    );
}

export default Home;

About.js


import React from 'react';

function About(props) {
    return (
        <div>
            <h1>About</h1>
        </div>
    );
}

export default About;<h1>About</h1>

라우터할 페이지를 만든다.

2. 페이지 연결하기

App.js


import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
import "./App.css";
import About from "./page/About";
import Home from "./page/Home";

function App() {
  return (
    <BrowserRouter>
        <Link to="/">홈</Link>
        <Link to="/about">소개</Link>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

💡

Link 컴포넌트를 사용해 네비게이트 주소를 생성한다. 그리고 Routes 를 활용해 네비게이터 주소에 해당하는 경로를 연결한다.

Home.js


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

function Home(props) {
  const navigate = useNavigate();

  function moveAbout() {
    navigate("/about");
  }

  return (
    <div>
      <h1>Home</h1>
      <button onClick={moveAbout}>소개페이지이동</button>
    </div>
  );
}

export default Home;

💡

useNavigate 는 React Router 에서 제공하는 훅(hook)으로, 컴포넌트 내에서 페이지 이동을 도와준다. Home 페이지 버튼을 생성 후 moveAbout() 함수를 연결한다. moveAbout() 가 실행되면 /about 주소로 연결된다.

버튼을 누르면 /about 으로 이동한다.

3. url 매개변수 가져오기

components/Nav.js


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

function Nav(props) {
    return (
        <div>
         <Link to="/">홈</Link>
         <Link to="/about">소개</Link>
        </div>
    );
}

export default Nav;

App.js 에 있던 link 를 분리한다.

page/Info.js


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

function Info(props) {
    const {id} = useParams();

    return (
        <div>
            <h1>Info 번호 : {id}</h1>
        </div>
    );
}

export default Info;

새로운 Info.js 를 만든다.

💡

useParams 훅은 현재 URL 경로에서 동적 매개변수를 추출하는 데 사용된다. 위의 코드는 id 매개변수를 가져온다.

page/About.js


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

function About(props) {
    const navigate = useNavigate();

    function moveInfo(){
        navigate("/info/1212");
    }

    return (
        <div>
            <h1>About</h1>
            <button onClick={moveInfo}>유저정보페이지이동</button>
        </div>
    );
}

export default About;

💡

About.js 페이지에서 navigate 설정을 한다. navigate("/info/1212"); 여기서 id 값 1212 를 넘긴다.

App.js


import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import About from "./page/About";
import Home from "./page/Home";
import Nav from "./components/Nav";
import Info from "./page/Info";

function App() {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/info/:id" element={<Info />} />

      </Routes>
    </BrowserRouter>
  );
}

export default App;

💡

App.js 에서 /info/:id 경로를 연결한다. :id 를 통해 매개변수를 전달한다.

4. 쿼리스트링

page/Info.js


import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';

function Info(props) {
    const {id} = useParams();

    const navigate = useNavigate();

    function moveList(){
        navigate(`/list?page=0`)
    }

    return (
        <div>
            <h1>Info 번호 : {id}</h1>
            <button onClick={moveList}>리스트페이지이동</button>
        </div>
    );
}

export default Info;

버튼을 누르면 List.js 로 이동하도록 한다.

page/List.js


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

function List(props) {
    const [searchParams,setSearchParams] = useSearchParams();
    let page = searchParams.get("page");  // 쿼리스트링 객체 가져옴

    function next(){
        setSearchParams({page:Number(page)+1}); // setSearchParams 를 사용해 업데이
    }

    return (
        <div>
            <h1>List page :{page}</h1>
            <button onClick={next}>다음페이지</button>
        </div>
    );
}

export default List;

💡

useSearchParams는 react-router-dom 라이브러리에서 제공하는 훅(Hook)으로, URL의 쿼리 문자열을 읽고 업데이트하는 데 사용된다.

searchParams : URL의 쿼리 문자열을 나타내는 객체이다. 이 객체를 사용하여 특정 쿼리 매개변수의 값을 가져올 수 있다.

setSearchParams : 쿼리 문자열을 업데이트하는 함수. 이를 통해 쿼리 매개변수를 변경할 수 있다.

App.js


import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import About from "./page/About";
import Home from "./page/Home";
import Nav from "./components/Nav";
import Info from "./page/Info";
import List from "./page/List";

function App() {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/info/:id" element={<Info />} />
        <Route path="/list" element={<List />}/>

      </Routes>
    </BrowserRouter>
  );
}

export default App;

/list 주소를 추가한다.