[React.js] react-router (useParams, useSearchParams)

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 Router를 배우다.

---

1. React에서의 Router, Route 정의

React Router 정의 (그림 1)

# index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
  <BrowserRouter>
    <App />
  </BrowserRouter>
  // </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 Router는 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주게 하는 것이다. React.js를 배우기 전에 Node.js에서 라우터를 할 때 Route 폴더를 만들어서 서버에 라우터를 직접 걸어줬다. React에서는 그럴 필요 없이 BrowserRouter를 index.js에서 App 컴포넌트를 감싼 후 Routes, Route를 사용하면 된다.

1 - 1. BrowserRouter

BrowserRouter 설명 (그림 2)

라우터를 하기 전에 해야 하는 필수적인 작업이다. 모든 컴포넌트를 포함하는 App 컴포넌트를 감싸야한다. (안 하면 오류가 발생함)

 

1 - 2. Routes, Route

Routes, Route 설명 (그림 3)

 리액트에서는 따로 Router폴더를 만들지 않고 컴포넌트의 개념으로 생각한다. 해당 컴포넌트 파일에 사용자가 요청한 URL에 맞게 보일 페이지의 화면을 구성해 주면 된다. Routes 태그 안에서 라우터 할 태그들을 사용하는 것이다. 각 라우터 태그는 Route니까 결국엔 Route 태그들은 Routes 태그 안에 감싸있어야 한다.

 그럼 사용자가 어떤 URL을 요청했을 때, 어떤 컴포넌트를 보여줄지를 정해야 한다. URL의 가장 뒷부분에 "/어쩌고" 이런 식으로 구분한다. 그럼 어쩌고 부분을 개발자가 임의로 지정해서 사용자가 링크를 누른다던가, 버튼을 누른다던가 해서 특정 URL을 요청하게끔 하면 된다.

Routes, Route 사용방법 (그림 4)

어떤 URL을 받았을 때 어떤 컴포넌트를 페이지에 보여줄지 정하는 방법은 그림 4를 보면 된다. URL의 가장 뒷부분에 와야 하는 것을 path 속성을 사용해서 지정하고, 보여줄 컴포넌트는 element 속성에 중괄호를 사용해서 컴포넌트 태그를 넣어준다. 태그의 이름은 컴포넌트 폴더 안에서 지정한 컴포넌트 파일의 이름과 동일하게 사용하면 된다. 라우터를 할 때도 props로 값을 넘겨줄 수 있다. Route 태그의 속성값으로 주는 것이 아닌 element 속성 값으로 주는 컴포넌트 태그 안에 props를 줘야 한다. 실수하지 않도록 해야 한다. 

---

2. Link, useNavigate

 사용자가 URL을 요청할 수 있게 해주는 방법은 Link태그를 사용하는 것과 useNavigate를 사용하는 것이 있다. 각각 사용 방법과 사용하는 상황을 알아보겠다.

2 - 1. Link

<Link> vs <a> (그림 5)

 페이지에서 사용자가 URL을 요청하는 방법은 보통 링크를 클릭하거나 버튼을 누르는 방법이 있다. 기존 HTML에서 a태그가 링크로 이동하는 기능을 하는 태그인데 사용하지 않을 것이다. 리액트의 장점인 새로고침 없이 페이지 전환이 가능하다는 것인데 a태그를 사용하면 페이지를 새로고침하면서 페이지 전환이 일어나기 때문에 속도저하를 일으킨다. 따라서 Link 태그를 사용해서 새로고침 없이 화면 전환이 일어나도록 한다. 

<Link to={'/about'}>About 페이지로 이동하기!</Link>

위 코드 결과 (그림 6)

Link 태그를 사용하면 그림 6처럼 나타난다. 해당 링크를 클릭했을 때 이동할 URL의 주소의 가장 뒤에 올 문자를 Link 태그 속성의 to 속성의 값으로 주면 된다. 실제로 클릭하면 Link 태그이기 때문에 새로고침 없이 URL의 주소만 바뀌면서 화면이 About 컴포넌트의 화면으로 변경되는 것을 볼 수 있다.

---

2 - 2. useNavigate

<Link> vs useNavigate (그림 7)

react-router-dom 안에 있는 useNavigate는 Link처럼 사용자가 URL을 요청할 수 있게 해주는 기능이다. 차이점은 useNavigate는 클릭하면서 실행될 로직을 함께 사용할 수 있다는 것이다. URL을 요청할 수 있는 조건도 부여할 수 있다. 그래서 보통 button 태그에 onClick을 이용해서 함수를 실행시킬 때 사용한다.

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


const Home = ({loginState, setLoginState}) => {

  const navigate = useNavigate()

  const goToProduct = () => {
    loginState?navigate('/product'):navigate("/login")
  }
  
  return (
    <div style={{margin:"10px"}}>
      <button onClick={goToProduct}>상품페이지로 이동하기</button>
    </div>
  )
}

export default Home

 위 코드를 보면 '상품페이지로 이동하기' 버튼을 누르면 함수가 실행되는데 그 함수 안에서 navigate를 사용하는 것이다. navigate를 사용하기 위해서는 useNavigate를 선언해야 한다.  navigate를 선언하고 매개변수로 요청할 URL의 맨 뒷부분을 넣으면 된다.

3. useParams, useSearchParams

3 - 1. useParams

useParams (그림 8)

      {/* URL 파라미터 형식으로 Route 구성하기 */}
      {/* :pro_no 써진 그대로 사용하는 것이 아니라 URL에 적힌 값이 객체형태로 받아와짐 */}
      <Route path='/product/:pro_no' element={<ProductDetail/>} />

useParams는 URL뒤에 ID값처럼 숫자나 특정 문자가 1개만 올 경우 사용할 수 있는 방법이다. 예를 들어 상품이 여러 개 있을 때 상품 번호에 따라 URL이 변경된다면 path의 :pro_no 가 가장 뒤의 번호를 유동적으로 감지하고 컴포넌트에서 사용할 수 있게 해 준다.

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

const ProductDetail = () => {

    // useParams는 객체형태여서 그 안에서 내가 사용할 pro_no만 가져오겠다 / props에서 값을 가져오는 방법과 동일
    const {pro_no} = useParams() 

    // useParams()는 URL 파라미터로부터 넘겨받은 값을 객체로 반환해주기 때문에 
    // const {파라미터1, 파라미터2, ...} = useParams() 로 파라미터 이름을 사용해서 가져온다.

  return (
    <div>
        <h1>ProductDetail</h1>
        <p>상품번호 : {pro_no}</p>
        <Link to={'/'}>Home 페이지로 이동하기!</Link>
    </div>
  )
}

export default ProductDetail

useParams로 감지하면 객체형태로 가져오기 때문에 path에서 사용한 이름을 그대로 가져와서 접근하고 사용한다.

---

3 - 2. useSearchParams

useSearchParams (그림 9)

    const goToProductDetail2 = () => {
        navigate("/productDetail2?cate=shirt")
    }

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

const ProductDetail2 = () => {

  const [query, setQuery] = useSearchParams()

  // 쿼리스트링으로 넘겨받은 데이터를 가져오는 함수 : query.get(name)
  // ex) http://lovalhost:3000/product?cate=shirt
  // cate에 연결된 값 접근 방법 query.get("cate") ==> shirt
  console.log("product페이지로부터 전달 받은 값 : ", query.get("cate"));

  return (
    <div>ProductDetail2</div>
  )
}

export default ProductDetail2

useSearchParams는 URL 뒤에 카테고리로 여러 개가 붙여지면서 URL을 구별할 때 사용한다. QueryString 형태로 정보를 가져온다. state처럼 대괄호를 사용해서 useSearchParams를 query에 저장한다. URL에 맨 뒤에 cate라는 이름의 값이 shirt로 설정했기 때문에 query.get(이름)으로 접근하면 URL의 등호 다음 값이 나온다.