[React] 리액트 동적 라우팅(Dynamic Routing) - useLocation, useNavigate, useParams, useSearchParams

📌 동적 라우팅(Dynamic Routing)

웹 애플리케이션에서 클라이언트의 요청에 따라 경로를 동적으로 처리하는 라우팅 방식입니다.

사용자의 입력, 상태 변화, 또는 다양한 조건에 따라 서버가 어떤 페이지나 리소스를 제공할지 결정합니다.

이는 사전에 경로가 고정된 정적 라우팅(Static Routing)과 다르게,

실행 시점에 라우팅 규칙이 결정되는 특징이 있습니다.

 

• Path Parameter(경로 매개변수)
  URL에서 하나의 정보를 전달할 때 사용합니다. 
  특정 목록에서 상세 페이지로 이동할 때 /about/sohyun처럼 사용
  
  
• Query Parameter(쿼리 매개변수)
  URL에서 여러 정보를 전달할 때 사용합니다.
  페이지네이션이나 필터링 기능을 구현할 때 
  /about?name=sohyun처럼 사용

 

 

 

---

📌 Path Parameter (경로 매개변수)

URL 경로에서 변할 수 있는 부분을 나타내며, URL 구조에 포함되어 있습니다.

/about/sohyun에서 sohyun이 Path Parameter입니다.

 

• URL 경로 뒤에 :/식별자 형식 동적 부분 지정
• 사용자가 해당 경로로 요청을 보내면, URL을 보고 어떤 내용을 보여줄지 결정

<Route path="/경로명/:동적경로 값" element={<컴포넌트 />} />

 

 

사용예시

/product/2, /product/45, /product/125와 같은 URL이 들어왔을 때, 각각의 ID에 맞는 페이지를 보여줍니다.

<Route path="/product/:id" element={<Product />} />

localhost:3000/product/2
localhost:3000/product/45
localhost:3000/product/125

 

---

📌 Query Parameter (쿼리 매개변수)

URL의 "?" 뒤에 "키=값" 형식으로 여러 가지 정보를 전달하는 방식입니다.

필터링이나 페이지 이동(페이지네이션) 기능을 구현할 때 /about?name=sohyun처럼 사용합니다.

/path?key1=value1&key2=value2

 

 

라우트 설정에서는 Query Parameter를 지정할 필요가 없습니다.

이 설정은 /search 경로만 정의하고, 뒤에 붙는 ?query=apple 같은 것은 포함하지 않습니다.

<Route path="/search" element={<SearchComponent />} />

 

---

📌 리액트 라우터(동적 라우팅) 훅

🪝 URL 정보 훅

•  useLocation 
  현재 URL 전체 정보 제공
  URL의 경로(pathname), 쿼리 문자열(search), 해시(hash), 상태값(state) 등을 포함
  
  

🪝 경로 이동 훅

•  useNavigate 
  페이지를 이동하거나 경로 변경할 때 사용
  사용자가 다른 페이지로 이동할 때 훅 사용
  
  

🪝 Path Parameter(경로 매개변수) 훅

•  useParams 
  URL 경로에 포함된 동적 매개변수를 가져오는데 사용
  /product/2에서 '2'를 가져옵니다.
  
  

🪝 Query Parameter(쿼리 매개변수) 훅

•  useSearchParams 
  URL의 쿼리 문자열을 읽거나 수정할 때 사용
  ?key=value 형식의 쿼리 매개변수를 다루는 데 유용

---

🪝 useLocation

useLocation Hook은 현재 페이지의 URL 정보를 담고 있는 객체를 반환한다. 

이 객체는 pathname, search, hash, state 등 여러 속성을 포함하고 있으며, 

useNavigate를 통해 전달된 state는 useLocation를 통해 사용할 수 있다.

pathname	현재 URL의 경로(쿼리문자열 제외) (예: /home)
search	현재 URL의 쿼리문자열(?키=값) 반환 (예: ?query=search)
hash	현재 URL의 해시 부분(#문자열 뒤의 값) 반환 (예: #section1)
state	페이지로 이동할 때 state로 전달된 임의의 상태 값 <Link> 또는 useNavigate 로 state를 전달한 경우
key	location 객체의 고유 값으로 페이지가 변경될 때마다 새로운 고유값 생성(초기값 default)

 

 

사용예시

🌐 http://localhost:3000/about/?detail=true&mode=1#section1

const location = useLocation();
console.log(location);
// ▶ 출력
// {
//    pathname : '/about/',
//    search   : '?detail=true&mode=1',
//    hash     : '#section1',
//    state    : null,
//    key      : 'default'
// }

 

---

🪝 useNavigate

useNavigate Hook은 페이지를 다른 경로로 이동시키는 함수 제공한다. 

이 Hook의 장점은 단순히 페이지를 이동시키는 것뿐만 아니라, 

이동할 때 추가적인 상태(state) 또는 데이터를 전달할 수 있다는 점이다.

 

• 페이지 이동
  navigate('/이동경로') 지정한 페이지로 이동시킬 수 있습니다.
  
  
• 상태 전달
  이동할 때 추가적인 상태나 데이터를 전달할 수 있습니다. 
  이 데이터는 다음 페이지에서 useLocation을 통해 접근할 수 있습니다.

 

📝 useNavigate 형태

const navigate = useNavigate();
navigate('/이동경로', { state: { 키: 값, 키: 값, ... } });

// ▶ 페이지 히스토리 이동 (delta)
// < 이전 페이지로 이동
navigate(-1);

// > 다음 페이지로 이동
navigate(1);

---

 

사용예시

1️⃣ 페이지 이동 및 상태 전달

/dashboard 페이지로 이동하면서 { userId: 123, role: 'admin' } 상태 전달합니다.

• URL 경로 : http://localhost:3000/dashboard
  • URL 경로는 단순히 지정한 /dashboard로 나타납니다.
• 상태 데이터 : { userId: 123, role: 'admin' }
  • 상태 데이터는 URL에 직접 표시되지 않고, 
    useLocation 훅을 사용하여 이동한 페이지에서 접근할 수 있습니다.

const navigate = useNavigate();

// ▶ '/dashboard'로 이동하며 상태를 전달
navigate('/dashboard', { state: { userId: 123, role: 'admin' } });

 

2️⃣ 상태 데이터 접근

 

이동한 Dashboard 페이지에서 상태 데이터를 접근하려면 useLocation 훅 사용

상태 데이터가 undefined일 가능성을 대비하여 옵셔널 체이닝(state?)을 사용하는 것이 좋습니다.

옵셔널 체이닝은 객체가 존재하지 않을 때 오류를 방지하고 안전하게 접근할 수 있게 해줍니다.

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

const Dashboard = () => {
  const location = useLocation();
  const state = location.state;

  console.log(state); // { userId: 123, role: 'admin' }

  return (
    <div>
      <h1>Dashboard</h1>
      <p>User ID: {state?.userId}</p>
      <p>Role: {state?.role}</p>
    </div>
  );
};

 

---

🪝 useParams

useParams Hook은 현재 경로의 URL 매개변수를 가져올 수 있게 해줍니다.
동적 매개변수란 URL의 일부분으로 변할 수 있는 값을 의미합니다. 

예를 들어, /user/:userId에서 :userId가 동적 매개변수입니다.
이 훅은 동적 라우트를 사용하는 컴포넌트에서 URL의 변수 부분에 접근할 때 유용합니다.

 

1️⃣ 라우트 동적 경로 설정

:userId는 URL에서 사용자 ID를 동적으로 받아오는 부분입니다.

// ▶ :userId는 동적 URL 매개변수
<Route path="/user/:userId" element={<User />} />

 

2️⃣ useParams() 사용하여 해당 매개변수에 액세스

🌐 http://localhost:3000/user/103

User 컴포넌트에서 useParams를 사용하면 userId 매개변수의 값은 '103'입니다.

페이지 "User ID: 103"이라고 표시

 

• useParams 훅은 현재 경로의 모든 동적 매개변수를 객체 형태로 반환합니다.
  URL이 /user/103일 때, useParams는 { userId : '103' }이라는 객체 반환합니다.
• 구조 분해 할당을 사용하여 매개변수 값을 직접 사용할 수 있습니다.

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

function User() {
  // ▶ useParams 훅을 사용하여 URL 매개변수에 액세스합니다.
  //    useParams는 현재 경로의 모든 동적 매개변수를 객체 형태로 반환합니다.
  // → 구조 분해 할당을 이용하여 바로 값을 넣습니다.
  const { userId } = useParams();
  
  return <div>User ID: {userId}</div>;
}

 

---

🪝 useSearchParams

useSearchParams Hook은 URL의 쿼리 파라미터를 읽고 수정할 수 있는 도구입니다.

쿼리 파라미터는 URL에서 ? 뒤에 있는 부분입니다.

 

📝 useSearchParams 형태

• searchParams (쿼리문자열 객체)
  현재 URL의 쿼리 문자열을 나타내는 객체입니다. 
  이 객체를 통해 쿼리 파라미터를 읽거나 조회할 수 있습니다.
• setSearchParams (쿼리문자열 변경함수)
  쿼리 문자열을 업데이트하거나 추가할 때 사용하는 함수

const [쿼리문자열 객체, 쿼리문자열 변경함수] = useSearchParams();
const [searchParams, setSearchParams] = useSearchParams();

 

📝 useSearchParams 메서드

🔎 값 조회

•  searchParams.get(key) 
  • 해당 key의 value를 가져온다.
  • key가 여러 값을 가질 경우, 첫 번째 값만 반환됩니다.
•  searchParams.getAll(key) 
  • key에 해당하는 모든 값을 배열 형태로 가져옵니다.
•  searchParams.toString() 
  • 현재 쿼리 스트링을 문자열 형태로 반환한다.
    
    

🔎 값 변경

•  searchParams.set(key, value) 
  • 지정한 key에 새로운 value를 설정합니다.
  • key가 이미 존재한다면 기존 값을 새로 지정한 값으로 교체합니다.
  • 존재하지 않는 key인 경우, 새로운 key와 value를 추가합니다.
•  searchParams.append(key, value) 
  • 지정한 key에 새로운 value를 추가합니다.
  • 기존 값에 영향을 주지 않고, 같은 key에 여러 값을 추가할 수 있습니다.
    
    

🔎 값 삭제 / 존재 여부 확인

•  searchParams.delete(key) 
  • 지정한 key와 그에 연결된 모든 값을 삭제합니다.
  • key가 존재하지 않으면 아무 작업도 하지 않습니다.
•  searchParams.has(key) 
  • 지정한 key가 쿼리 파라미터에 존재하는지 여부 true / false 반환

 

---

1️⃣ 컴포넌트 코드

• 자동 업데이트
  버튼 클릭 시 searchParams 객체를 수정하면, setSearchParams 호출을 통해 URL이 자동으로 변경
  사용자는 URL을 직접 입력하거나 수정할 필요가 없습니다.
• 변경 반영
  URL이 변경되면 화면에 표시되는 값도 자동으로 업데이트되어 새로운 쿼리 파라미터 반영

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

const QueryStringExample = () => {
  // ▶ useSearchParams 훅을 사용하여 
  //    쿼리 문자열 객체와 업데이트 함수 가져오기
  const [searchParams, setSearchParams] = useSearchParams();

  // ▶ 값 조회
  const name = searchParams.get('name') || '없음';
  const age = searchParams.get('age') || '알 수 없음';
  const tags = searchParams.getAll('tags');    // 여러 값 조회 가능
  const queryString = searchParams.toString(); // 전체 쿼리 문자열

  // ▶ 값 변경
  const setName = () => {
    searchParams.set('name', 'Sohyun');
    setSearchParams(searchParams);
  };

  const setAge = () => {
    searchParams.set('age', '29');
    setSearchParams(searchParams);
  };

  const addTags = () => {
    searchParams.append('tags', 'new-tag');
    setSearchParams(searchParams);
  };

  const removeName = () => {
    searchParams.delete('name');
    setSearchParams(searchParams);
  };

  return (
    <div>
      <h1>쿼리 문자열 예제</h1>
      <p>이름: {name}</p>
      <p>나이: {age}</p>
      <p>태그: {tags.join(', ') || '없음'}</p>
      <p>전체 쿼리 문자열: {queryString || '없음'}</p>
      <button onClick={setName}>이름을 Sohyun으로 설정</button>
      <button onClick={setAge}>나이를 29으로 설정</button>
      <button onClick={addTags}>태그 추가</button>
      <button onClick={removeName}>이름 제거</button>
    </div>
  );
};

export default QueryStringExample;

 

2️⃣ 실행결과

1. 초기 상태

• URL : http://localhost:3000/?name=Alice&age=25&tags=programming&tags=react
• 화면
  • 이름 : Alice
  • 나이 : 25
  • 태그 : programming, react
  • 전체 쿼리 문자열 : name=Alice&age=25&tags=programming&tags=react
    
    

2. "이름을 Sohyun으로 설정" 버튼 클릭

• 동작 : searchParams.set('name', 'Sohyun') 호출
  • name 파라미터를 'Sohyun'으로 변경
  • setSearchParams(searchParams) 호출로 URL이 자동으로 업데이트됨
• URL : http://localhost:3000/?name=Sohyun&age=25&tags=programming&tags=react
• 화면
  • 이름 : Sohyun
  • 나이 : 25
  • 태그 : programming, react
  • 전체 쿼리 문자열 : name=Sohyun&age=25&tags=programming&tags=react
    
    

3. "나이를 29으로 설정" 버튼 클릭

• 동작 : searchParams.set('age', '29') 호출
  • age 파라미터를 '29'로 변경
  • setSearchParams(searchParams) 호출로 URL이 자동으로 업데이트됨
• URL : http://localhost:3000/?name=Sohyun&age=29&tags=programming&tags=react
• 화면
  • 이름 : Sohyun
  • 나이 : 29
  • 태그 : programming, react
  • 전체 쿼리 문자열 : name=Sohyun&age=29&tags=programming&tags=react
    
    

4. "태그 추가" 버튼 클릭

• 동작 : searchParams.append('tags', 'new-tag') 호출
  • tags 파라미터에 'new-tag'을 추가
  • setSearchParams(searchParams) 호출로 URL이 자동으로 업데이트됨
• URL : http://localhost:3000/?name=Sohyun&age=29&tags=programming&tags=react&tags=new-tag
• 화면
  • 이름 : Sohyun
  • 나이 : 29
  • 태그 : programming, react, new-tag
  • 전체 쿼리 문자열 : name=Sohyun&age=29&tags=programming&tags=react&tags=new-tag
    
    

5. "이름 제거" 버튼 클릭

• 동작 : searchParams.delete('name') 호출
  • name 파라미터를 제거
  • setSearchParams(searchParams) 호출로 URL이 자동으로 업데이트됨
• URL : http://localhost:3000/?age=29&tags=programming&tags=react&tags=new-tag
• 화면
  • 이름 : 없음
  • 나이 : 29
  • 태그 : programming, react, new-tag
  • 전체 쿼리 문자열 : age=29&tags=programming&tags=react&tags=new-tag

 

---