쿼리스트링을 이용한 라우팅 이동

쿼리스트링(Query String)란?

쿼리스트링은 URL의 끝에 붙어서, 서버나 웹 애플리케이션에 추가적인 데이터를 전달하는 역할을 합니다. 주로 물음표(?) 뒤에 오는 부분을 가리키며, 여러 개의 값이 있을 경우에는 &로 구분됩니다.

쿼리스트링의 예시

아래와 같은 URL을 생각해볼게요:

https://example.com/search?keyword=react&sort=latest

• https://example.com/search: 기본 URL (도메인과 경로)
• ?keyword=react&sort=latest: 쿼리스트링

여기서 쿼리스트링의 구성 요소는 다음과 같습니다:

• keyword=react: 검색 키워드가 "react"라는 의미
• sort=latest: 검색 결과를 "최신순"으로 정렬하라는 의미

이런 식으로 쿼리스트링을 통해 검색어, 정렬 순서, 필터 등 다양한 추가 정보를 전달할 수 있어요.

쿼리스트링의 주요 특징

1. 키와 값으로 구성됨: 쿼리스트링은 키=값 형태로 데이터를 전달합니다. 예를 들어, keyword=react에서 keyword가 키(key), react가 값(value)입니다.
2. 여러 개의 값 전달 가능: & 기호를 사용해 여러 개의 키-값 쌍을 전달할 수 있습니다. 예: ?keyword=react&sort=latest
3. 서버와 클라이언트 간의 데이터 전달에 사용: 쿼리스트링은 주로 서버와 클라이언트 간에 데이터를 전달하거나 특정 요청에 대한 추가 정보를 제공할 때 사용됩니다.

---

현재 URL 정보를 화면에 표시하기

1. const location = useLocation();

• useLocation은 React Router에서 제공하는 훅(hook)으로, 현재 브라우저의 URL에 대한 정보를 담은 객체를 반환합니다. 이 객체는 URL의 경로(path), 검색 쿼리(search), 해시(hash) 등의 정보를 포함하고 있어, 컴포넌트가 현재의 경로에 따라 다른 동작을 하도록 할 수 있습니다.

2. <p>Pathname: {location.pathname}</p>

• location.pathname은 현재 URL의 경로를 나타냅니다. 예를 들어, 사용자가 https://example.com/todos에 있다면 location.pathname은 "/todos"가 됩니다. 이를 통해 현재 사용자가 어떤 페이지에 있는지 알 수 있습니다.

3. <p>Search: {location.search}</p>

• location.search는 현재 URL에 있는 검색 쿼리 문자열을 반환합니다. 예를 들어, URL이 https://example.com/todos?filter=completed일 경우, location.search는 "?filter=completed"가 됩니다. 이를 통해 URL에 포함된 추가 데이터(필터, 검색어 등)를 쉽게 가져올 수 있습니다.

4. <p>Hash: {location.hash}</p>

• location.hash는 URL의 해시(fragment) 부분을 나타냅니다. 해시는 일반적으로 페이지 내의 특정 섹션으로 스크롤하기 위해 사용됩니다. 예를 들어, URL이 https://example.com/todos#section1일 경우, location.hash는 "#section1"이 됩니다. 이를 통해 특정 페이지의 섹션을 지정하거나 스크롤 위치를 제어할 수 있습니다.

Pathname: /todos
Search: ?filter=completed
Hash: #section1

---

URL 쿼리스트링 관리하기

1. const [searchParams, setSearchParams] = useSearchParams();:

   • useSearchParams 훅을 사용해 searchParams 객체와 setSearchParams 함수를 가져옵니다. 이 객체는 URL의 쿼리스트링을 읽고 설정하는 데 사용됩니다.
   • searchParams: 현재 URL의 쿼리스트링을 다룰 수 있는 객체.
   • setSearchParams: 쿼리스트링을 업데이트할 수 있는 함수.
     따라서, useSearchParams는 [searchParams, setSearchParams]와 같은 배열을 반환하게 되는데, 배열의 첫 번째 요소는 searchParams 객체이고, 두 번째 요소는 setSearchParams 함수가 됩니다.

2. const filter = searchParams.get('filter');:

   • searchParams 객체를 사용해 쿼리스트링에서 filter라는 키의 값을 가져옵니다. 예를 들어, URL이 ?filter=completed라면, filter 변수는 completed 값을 갖게 됩니다.

3. setSearchParams({ filter: newFilter });:

   • setSearchParams 함수를 사용해 쿼리스트링을 업데이트합니다. 예를 들어, 필터링 옵션을 변경할 때 URL에 반영되도록 쿼리스트링을 업데이트할 수 있습니다.

4. {filter && <p>Filtering by: {filter}</p>}:

   • 쿼리스트링에 filter 값이 존재할 경우, 필터링 정보를 화면에 표시합니다. 이를 통해 사용자에게 현재 적용된 필터 상태를 알려줄 수 있습니다.

useSearchParams 훅을 사용하여 URL의 쿼리스트링을 가져오고, 이를 화면에 표시하며 필요할 때 업데이트하는 예시입니다.

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

function FilterComponent() {
  // 1. useSearchParams 훅을 사용해 URL의 쿼리스트링을 읽고 설정할 수 있는 객체와 함수를 가져옵니다.
  const [searchParams, setSearchParams] = useSearchParams();
  
  // 2. 현재 쿼리스트링에서 'filter'라는 키의 값을 가져옵니다.
  const filter = searchParams.get('filter');

  // 3. 필터 값을 업데이트하는 함수
  const updateFilter = (newFilter) => {
    // 새로운 필터 값으로 쿼리스트링을 업데이트합니다.
    setSearchParams({ filter: newFilter });
  };

  return (
    <div>
      {/* 4. 현재 필터 상태를 표시합니다. */}
      {filter && <p>Filtering by: {filter}</p>}
      
      {/* 필터를 변경할 수 있는 버튼들 */}
      <button onClick={() => updateFilter('completed')}>Show Completed</button>
      <button onClick={() => updateFilter('pending')}>Show Pending</button>
      <button onClick={() => setSearchParams({})}>Clear Filter</button>
    </div>
  );
}

export default FilterComponent;

이 코드가 하는 일

1. useSearchParams 훅 사용: useSearchParams를 사용하여 URL의 쿼리스트링을 읽고 관리할 수 있는 searchParams와 setSearchParams를 가져옵니다.
2. 쿼리스트링에서 특정 키 값 가져오기: searchParams.get('filter')를 사용해 URL 쿼리스트링에서 filter라는 키의 값을 가져옵니다.
3. 쿼리스트링 업데이트 함수: updateFilter 함수를 통해 새로운 필터 값을 setSearchParams로 설정하여 쿼리스트링을 업데이트합니다.
4. 필터 상태 표시 및 버튼: 현재 필터 상태를 화면에 표시하고, 버튼을 통해 필터를 변경할 수 있습니다.

사용 예시

이 컴포넌트를 렌더링했을 때, 사용자가 "Show Completed" 버튼을 클릭하면 URL 쿼리스트링이 ?filter=completed로 업데이트됩니다. 그리고 화면에는 "Filtering by: completed"라는 문구가 표시됩니다.

추가 사항

이 예제는 react-router-dom이 설치되어 있어야 하고, FilterComponent 컴포넌트가 라우트 내에서 사용되어야 합니다. 예를 들어, App.js 파일에서 아래와 같이 설정할 수 있습니다.

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import FilterComponent from './FilterComponent';

function App() {
  return (
    <Router>
      <Routes>
        {/* FilterComponent 컴포넌트를 특정 경로에 매핑합니다. */}
        <Route path="*" element={<FilterComponent />} />
      </Routes>
    </Router>
  );
}

export default App;