React useParams(), useSearchParams()

페이지 접근시 URL 파라미터를 사용해야 하는 경우가 있다.

이 경우 해당 파라미터를 어떻게 받아오고 어떻게 설정해야 하는지에 대해 정리한다.

 

 

react-router

어떻게 받을지 알기 전에 react-router에 대해 알아야 한다.

routing이라는 것은 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다.

즉, 다양한 주소의 요청이 들어오는 것을 각각에 맞는 컴포넌트로 이동시켜 주는 작업이라고 볼 수 있다.

 

리액트에서 이 router를 사용하기 위해 react-router-dom을 사용했다.

리액트로 생성된 SPA 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리이다.

 

설치

npm install react-router-dom

 

가장 기본적인 세팅은 두가지 방법으로 하는것 같았다.

말이 두가지 방법이지 동일한데 어디에 쓰느냐의 차이만 있다.

//1. index.js에 작성

//index.js
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
//...

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </>
);


//App.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';
//...

//import component
//...

function App() {

    return (
        <Routes>
            <Route index element={<BoardPage />} />
            <Route path='?pageNum=:pageNum' element={<BoardPage />} />
            //...
        </Routes>
    )
}




//App.js에 작성

//index.js
import React from 'react';
//...

const root ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <>
        <App />
    </>
)


//App.js
import React from 'react';
import {
    BrowserRouter,
    Routes,
    Route
} from 'react-router-dom';
//...

//import component
//...

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route index element={<BoardPage />} />
                <Route path='?pageNum=:pageNum' element={<BoardPage />} />
                <Route 
                    path='?keyword=:keyword&searchType=:searchType' 
                    element={<BoardPage />} 
                />
                <Route 
                    path='?keyword=:keyword&searchType=:searchType&pageNum=:pageNum' 
                    element={<BoardPage />} 
                />
                <Route path='board/:boardNo' element={<BoardDetailPage />} />
                //...
            </Routes>
        </BrowserRouter>
    )
}

 

위 코드에서 볼 수 있듯이 포인트는 <BrowserRouter>로 App.js의 내부를 감싸줘야 한다는 것이다.

 

<Routes>는 여러 Route를 감싸고 그 중 규칙이 일치하는 Route를 렌더링한다.

<Route>는 path, element 속성을 작성하는데 의미 그대로 path에는 url 경로, element 속성은 렌더링할 컴포넌트를 정의한다.

 

 

useParams와 useSearchParams

 

그럼 이제 useParams와 useSearchParams를 정리한다.

useParams는 URL 파라미터를 받는데 사용하고 useSearchParams는 쿼리 스트링을 받는데 사용한다.

여기서 값을 의미하는 것은 앞에 : 를 붙여 표시하게 된다.

위 코드에서 볼 수 있듯이 url 파라미터 값도, 쿼리스트링의 값도 : 로 처리되고 있는것을 볼 수 있다.

 

사용코드

//userParams
//localhost:3000/board/{boardNo}

import { useParams } from 'react-router-dom';
//...

function BoardDetailpage() {
    const { boardNo } = userParams();
    //...
}


//useSearchParams
//localhost:3000/
//localhost:3000?pageNum=:pageNum
//localhost:3000?keyword=:keyword&searchType=:searchType
//localhost:3000?keyword=:keyword&searchType=:searchType&pageNum=:pageNum

import { useSearchParams } from 'react-router-dom';
//...

function BoardPage() {
    const [params] = useSearchParams();
    const pageNum = params.get('pageNum') == null ? 1 : params.get('pageNum');
    const keyword = params.get('keyword');
    const searchType = params.get('searchType');
    //...
}

 

userParams와 useSearchParams는 둘다 동일하게 react-router-dom을 통해 import 한 뒤 사용할 수 있다.

 

useParams()는 url 파라미터를 받는다고 했다

쿼리스트링처럼 객체 형태의 구조가 아니기 때문에 바로 boardNo로 받을 수 있다.

 

useSearchParams는 객체 구조로 들어오고 [params]와 같은 형태로 받을 수 있다.

그리고 그 안의 값을 꺼낼 때는 마치 map 구조에서 값을 조회하듯이 꺼낼 수 있다.

useSearchParams 코드 위 주석 처리한 url을 보면 여러개의 url이 존재하는데 각각 쿼리스트링이 차이나는 것을 확인할 수 있다.

이전 Route 설정에 대한 코드에서도 볼 수 있었듯이 여러 쿼리스트링에 대해서 하나의 컴포넌트를 연결할 수 있다.

그래서 여러개의 url에 대한 컴포넌트 접근을 제어할 수 있게 된다.

그럼 아무것도 전달되지 않는 경우 모든 쿼리스트링은 존재하지 않기 때문에 값을 조회했을 때 null이 반환되게 된다.

pageNum 값의 경우 null이면 조회요청을 보내는데 문제가 생기기 때문에 삼항연산자를 통해 null인 경우 1을 담을 수 있도록 처리했고, 검색어와 검색 타입은 굳이 없어도 상관없기 때문에 null인 경우 그대로 유지하도록 처리한 코드다.

 

---

 

아쉬운점으로는 Route 작성을 좀 어떻게 개선할 수 없을까 하는 점이 있다.

 

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route index element={<BoardPage />} />
                <Route path='?pageNum=:pageNum' element={<BoardPage />} />
                <Route 
                    path='?keyword=:keyword&searchType=:searchType' 
                    element={<BoardPage />} 
                />
                <Route 
                    path='?keyword=:keyword&searchType=:searchType&pageNum=:pageNum' 
                    element={<BoardPage />} 
                />
                <Route path='board/:boardNo' element={<BoardDetailPage />} />
                //...
            </Routes>
        </BrowserRouter>
    )
}

 

여러 url에 대한 처리를 위와 같이 여러개의 Route를 작성해 처리하고 있는데

이게 생각보다 좀 눈엣가시다...

하나의 Route에서 여러개의 url을 작성하고 element를 연결해주면 참 깔끔해보이겠는데.........

Route path={ [ ' ', ' ', ... ] } 형태로 v5부터 가능하다고는 하는데 안됨....ㅠㅠ