React-router-dom: 리액트 라우터 훅에 대해 알아보자

Home v6.26.2 | React Router

Home v6.26.2 | React Router

React-router-dom에 여러가지 훅이 있다. 더 많은 훅들은 위의 홈페이지에 들어가서 확인할 수 있다. 이번 게시물에서는 useParams, useSearchParams, useNavigate 훅에 대한 내용을 다룰 예정이다.

 

useParams

useParams는 URL의 동적 파라미터 값을 가져오는 훅으로, URL에 정의된 파라미터를 키-값의 형태의 객체를 반환하여 동적 라우팅을 구현한다. 

• <Route path={'/경로/:가변인자값명'} element={보여 줄 컴포넌트}/>

 

1. 동적 파라미터를 사용할 컴포넌트의 Route에 가변인자값명을 설정한다 ( :가변인자값명 )

URL의 특정 부분을 변수처럼 사용하여 해당 값을 컴포넌트에서 접근할 수 있다.

import { Route, Routes } from 'react-router-dom'
import Home from './components/Home'
import Params from './components/Params.jsx'

function App() {

  return (
    <div>
      <Routes>
          <Route path={'/'} element={<Home />} />
          <Route path={'/params/:id'} element={<Params />} />
      </Routes>
    </div>
  )
}

export default App

 

2. 동적 파라미터를 사용할 곳에 useParams를 import하고, 가변인자값명을 받아온다. 

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

export default function Params() {
    const { id } = useParams();

    return (
        <div>
            <h3>Params 컴포넌트입니다. </h3>
            <p>{id}님의 홈페이지입니다.</p>
        </div>    
    )
}

 

3. 주소창에 특정 URL을 입력하면, 해당 URL에 맞는 컴포넌트가 렌더링 된다.

---

useSearchParams

useSearchParams는 URL의 쿼리 문자열을 다루기 위해 제공되는 훅으로, 쿼리 파라미터를 읽고 업데이트할 수 있는 기능을 제공한다.  

* 쿼리 문자열은 ?를 통해 시작을 표시하고, 각 구분은 &를 통해 한다.

• const [searchParams, setSearchParams] = useSearchParams();
  searchParams.get(key)를 통해서 특정한 key의 값을 가져올 수 있다. 

1. useSearchParams를 import하고 쿼리 문자열을 가져온다.

(1) const [searchParams, setSearchParams] = useSearchParams();  작성한다.

(2) 해당 쿼리 문자열에서 사용되는 key 값을 가져온다.

// Params.jsx 

import { useSearchParams } from "react-router-dom"

export default function Params() {
    const [searchParams, setSearchParams] = useSearchParams();

// key 값 가져오기
    const id = searchParams.get("id");
    const nickName = searchParams.get("nickname");

    return (
        <div>
            <h3>Params 컴포넌트입니다. </h3>
            <p>{id}님의 홈페이지입니다.</p>
            <p>닉네임 :{nickName} </p>
        </div>
    )
}

// App.jsx

import { Route, Routes } from 'react-router-dom'
import Home from './components/Home'
import Params from './components/Params.jsx'

function App() {

  return (
    <div>
      <Routes>
          <Route path={'/'} element={<Home />} />
          <Route path={'/params'} element={<Params />} />
      </Routes>
    </div>
  )
}

export default App

 

path의 경우 /params고, 이후에 id는 "codingji", nickname은 "코딩쥐"라는 쿼리 문자열을 가진 URL을 보내면 해당 내용에 맞는 컴포넌트가 출력되는 것을 볼 수 있다.

---

useNavigate

useNavigate는 페이지를 이동하는데 있어서 사용하는 훅으로, 특정 경로로 페이지를 이동한다던가 혹은 이전페이지로의 이동 등의 기능을 사용할 수 있다.

 

1. useNavigate를 import하고 함수를 정의한다. 

useNavigate()를 호출하여 navigate라는 이름으로 함수를 정의한다. 

 

2. 특정 이벤트에 따라 navigate 함수를 호출한다. 

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

export default function About() {
    const navigate = useNavigate();

    const goToIntro = () => {
        navigate('/');
    };

    const goBack = () => {
        navigate(-1); //뒤로가기
    };

    return (
        <div>
            <div>
                <h3> About 컴포넌트 </h3>
                <p> /about 컴포넌트 내용입니다.</p>
            </div>
            <button onClick={goToIntro}>처음 페이지로 가기</button>
            <button onClick={goBack}>뒤로 가기</button>
        </div>
    )
}

 

<<App.jsx 코드>>

import { Route, Routes, NavLink } from 'react-router-dom'
import Intro from './components/Intro.jsx'
import Home from './components/Home'
import Params from './components/Params.jsx'
import About from './components/About.jsx'
import styles from './components/css/Page.module.css'

function App() {

  return (
    <div>
      <h2>페이지 이동 버튼</h2>
      <div>
        <NavLink to={'/'} className={styles.link}>Intro</NavLink>
        <NavLink to={'/home'} className={styles.link}>Home</NavLink>
        <NavLink to={'/about'} className={styles.link}>About</NavLink>
      </div>

      <Routes>
        <Route path={'/'} element={<Intro />} />
        <Route path={'/home'} element={<Home />} />
        <Route path={'/about'} element={<About />} />
        <Route path={'/params'} element={<Params />} />
      </Routes>
    </div>
  )
}

export default App