분류 Reactjs

React Router로 문자열을 쿼리하는 빠른 시작 안내서

컨텐츠 정보

  • 조회 359 (작성일 )

본문

React 웹 앱의 한 페이지에 레코드 목록에 대한 필터 세트를 구현하고 선택한 필터를 URL에 상태로 저장하려는 프로젝트를 진행했습니다. 

특정 필터를 선택한 상태에서 페이지에 직접 연결할 수 있도록 이 방법을 선택했습니다. 

URL의 쿼리 문자열에 필터 값을 추가하면 합리적인 솔루션이 제공됩니다.


https://spin.atomicobject.com/2019/10/01/a-quick-start-guide-to-query-strings-with-react-router/ 


웹 개발자인 경우 이전에 쿼리 문자열을 사용해 본 적이 있을 것입니다. React Router에서 처리하는 것은 다른 프레임 워크 도구와 유사하며 쿼리 문자열을 처음 배우는 것은 간단합니다. React Router를 처음 사용하거나 쿼리 문자열을 검색하고 구문 분석하는 방법에 대한 정보를 원한다면 이 안내서가 적합합니다.


Query Strings 101 


쿼리 문자열은 일반적으로 URL에 매개 변수를 포함하는 데 사용됩니다. 일반적인 쿼리 문자열은 다음과 같습니다.


https://search.com/?q=react&ia=web 


쿼리 문자열은? 뒤에 오고 여러 매개 변수는 구분 기호 (이 경우 &)로 구분됩니다. 이들은 일반적으로 키-값 쌍이지만 복잡한 개체 또는 배열을 쿼리 문자열의 URL에 포함 시킬 수 있습니다. 쿼리 문자열에는 검색 문자열, 필터 값 또는 여러 페이지에서 공유해야 하는 일시적인 데이터와 같은 유용한 정보가 포함될 수 있습니다.


React Router의 쿼리 문자열 


React Router는 개발자에게 응용 프로그램에 적합한 모든 것을 자유롭게 수행 할 수 있도록 합니다. 내장 쿼리 문자열 구문 분석을 포함하지 않습니다. 모든 사람의 요구를 충족시키는 대신 사용자가 자신의 구현을 처리 할 수 ​​있습니다. 좋은 소식은 그것이 매우 간단하다는 것입니다.


1. 시작 


정리 가능한 품목에 대한 필터 옵션이 있는 검색 가능한 제품 목록을 표시하는 구성 요소가 있다고 가정합니다. 이 페이지의 경로는 https://shopping.com/products/와 같습니다. 검색 문자열과 필터 값을 URL에 포함 시키기 위해 다음과 같은 쿼리 문자열을 만들려고 합니다.


https://shopping.com/products?q="shoes"&clearance=true 


경로 정의는 다음과 같습니다.


<Route exact path={"/products"} component={ProductsRouteLoader} /> 


로더 패턴을 사용하면 구성 요소는 다음과 같습니다.


import { asyncComponent } from "client/async-component"; import * as React from "react"; import { RouteComponentProps } from "react-router-dom"; export const ProductsRouteLoader = asyncComponent({ resolve: async () => { const Search = (await import( "client/pages/products" )).Products; const Wrapper: React.FunctionComponent< RouteComponentProps > = props => { // Access query params here // and pass them down to rendered component return ( ... ); }; return Wrapper; }, name: "ProductsPage", }); 


2. 액세스 라우터 매개 변수 


다음으로 URL에 저장된 매개 변수에 액세스 해야 합니다.


React Router는 소품의 내역, 일치 및 위치와 같은 몇 가지 객체를 전달합니다. 우리가 염려하는 것은 쿼리 매개 변수에 대한 정보가 포함되어 있기 때문에 위치입니다.


객체는 다음과 같습니다.


location: {pathname: "/products", search: "?q="shoes"&clearance=true", hash: "", state: undefined, key: "eltjl1"} 


이제 props.location.search를 통해 쿼리 문자열을 얻을 수 있지만 아직 아무것도 할 수 없습니다. 다음 단계는 파싱입니다.


3. 메소드을 선택하십시오 


Method 1 : 브라우저 API가 포함 된 DIY 


다음과 같은 경우 이 방법을 선택하십시오.

  • URL API를 지원하는 최신 브라우저를 타겟팅하고 있습니다. 여기를 확인하십시오
  • 외부 라이브러리보다는 더 가벼운 브라우저 구현을 선호합니다.
  • 매개 변수를 고유하게 처리해야 합니다.
  • TypeScript를 활용하고 싶습니다.

대부분의 최신 브라우저에서는 URL API에 액세스 할 수 있습니다. 즉, URLSearchParams를 사용하여 구문 분석을 처리 할 수 ​​있습니다. 새 URLSearchParams 객체가 있으면 URL의 쿼리 문자열에 사용할 수 있는 방법이 많이 있습니다. 대부분의 경우 액세스하려는 매개 변수 키를 사용하여 get() 메소드를 호출하기 만하면 됩니다.


단순히 원시 문자열 키 값을 전달하는 대신 안전성을 높이기 위해 유형을 활용할 수 있습니다. 이 경로의 유형은 다음과 같습니다.


export namespace ProductsRoute { export enum QueryParamKeys { q = "q", clearance = "clearance", } export type QueryParams = { q: string; clearance: boolean; }; const path = `${PATH_TEMPLATE}?${QueryParamKeys.q}=${q}&${QueryParamKeys.clearance}=${clearance}`; return generatePath(path) } 


ProductsRoute.QueryParamKeys.q 또는 ProductsRoute.QueryParamKeys.clearance를 구문 분석 함수에 전달하고 키가 유효한지 확인할 수 있습니다.


import { asyncComponent } from "client/async-component"; import * as React from "react"; import { RouteComponentProps } from "react-router-dom"; export const ProductsRouteLoader = asyncComponent({ resolve: async () => { const Search = (await import( "client/pages/products" )).Products; const Wrapper: React.FunctionComponent< RouteComponentProps > = props => { const searchTerm = query.get( ProductsRoute.QueryParamKeys.q ); const clearance = stringToBool(query.get( ProductsRoute.QueryParamKeys.clearance )); return ( ... ); }; return Wrapper; }, name: "ProductsPage", }); 


Gotcha : 부울 매개 변수를 처리 할 때 get() 메서드는 문자열 값`true` 또는`false`를 반환합니다. 간단한 도우미 함수를 사용하면 문자열 부울 값을 보다 쉽게 ​​처리 할 수 ​​있습니다.


Method 2 : 타사 라이브러리에서 처리하도록 


이 방법을 선택하면….


  • URL API를 지원하지 않는 브라우저 (예 : IE)를 타겟팅하고 있습니다. 여기를 확인하십시오
  • 특별한 취급이 필요하지 않습니다.

React Router는 URL API의 내장 브라우저 구현을 사용할 수 없는 경우 npm에서 사용 가능한 query-string과 같은 라이브러리를 사용하도록 권장합니다. yarn add query-string을 실행하여 추가하고 설치하십시오. 쿼리 문자열 구문 분석은 location.search를 parse() 함수에 전달하는 것만 큼 간단합니다.


import { asyncComponent } from "client/async-component"; import * as React from "react"; import { RouteComponentProps } from "react-router-dom"; import * as QueryString from "query-string" export const ProductsRouteLoader = asyncComponent({ resolve: async () => { const Search = (await import( "client/pages/products" )).Products; const Wrapper: React.FunctionComponent< RouteComponentProps > = props => { const params = QueryString.parse(props.location.search); console.log(params.q); // "shoes" console.log(params.clearance); // true return ( ... ); }; return Wrapper; }, name: "ProductsPage", }); 


결론 


쿼리 문자열은 URL을 통해 페이지 간에 데이터를 전달하여 웹 응용 프로그램에 원활한 기능과 유용성을 추가합니다. React Router를 사용하면 타사 라이브러리 또는 URL API의 브라우저 기반 구현을 사용하여 이러한 쿼리 문자열을 간단하게 구문 분석 할 수 있습니다.