React의 쿼리 문자열에서 URL 매개변수 값 가져오기

1. 리액트 라우터 V3
2. React Router V4 및 React Router V5

React 앱을 만드는 과정에서 때때로 쿼리 문자열에서 매개변수 값을 추출해야 할 수도 있습니다. 이렇게 하면 앱 전체에서 parameter 값을 참조할 수 있습니다.

2017년 React Router v4가 출시되면서 구문 분석된 this.props.location.query 속성이 제거되었습니다. 개발자는 쿼리 문자열에서 매개변수 값을 읽는 새로운 접근 방식을 찾아야 했습니다. 이 기사에서는 이전 버전과 최신 버전의 React에 대한 솔루션을 살펴보겠습니다.

리액트 라우터 V3

React Router v3의 query 문자열에서 매개변수 값을 추출하는 것은 쉽습니다. 이 버전의 React는 모든 작업을 수행하고 구문 분석된 위치를 소품으로 제공합니다. 다음 객체의 값을 확인하면:

this.props.location.query

쿼리에 있는 모든 매개변수의 key-value 쌍이 포함되어 있음을 알 수 있습니다. (쿼리는 ? 기호 뒤에 오는 URL 부분입니다.)

query 개체에 찾고 있는 매개변수가 포함되어 있지 않으면 path 매개변수 값도 확인해야 합니다. 이 값은 다음 위치에서 액세스할 수 있습니다.

this.props.match.params.redirectParam

React Router v3가 설치된 앱을 실행하는 한 구성 요소는 props를 허용하고 query 문자열과 path에서 매개변수 값을 가져올 수 있습니다.

v4부터 this.props.location.query 개체가 제거되었습니다. 제거의 주된 이유는 개발자가 query 문자열을 저장하는 고유한 방법을 만들 수 있도록 하는 것이었습니다.

React Router V4 및 React Router V5

React Router v4의 queries는 계속 액세스할 수 있지만 개발자는 이를 스스로 문자열로 변환해야 합니다. 이 정확한 문제를 해결하기 위해 qs 및 query-string과 같은 라이브러리가 만들어졌습니다.

최신 React Router 버전에서는 업데이트된 인터페이스와 query-string 라이브러리를 사용하여 query 객체를 구문 분석할 수 있습니다.

const queryToStr = require('query-string');
const result = queryToStr.parse(this.props.location.search);

클래스 컴포넌트용

위의 예는 React의 클래스 컴포넌트에 적용됩니다.

라이브러리를 사용하여 this.props.location.search를 구문 분석하면 key-value 매개변수 쌍과 해당 값과 함께 구문 분석된 query 개체를 반환할 수 있습니다.

기능성 부품용

지난 몇 년 동안 React 커뮤니티는 기능적 구성 요소를 위해 클래스 구성 요소를 포기하기 시작했습니다. 스위치의 주된 이유는 React hooks를 사용하는 기능적 구성 요소의 새로운 기능이었습니다.

query 문자열에서 매개변수 값을 추출할 때 this.props.location.search 값을 사용하는 대신 useLocation() hook의 인스턴스를 사용하십시오.

후크는 구문 분석된 query 개체를 반환하지 않습니다. 여전히 key-value 매개변수 쌍과 해당 값을 가져오려면 후크 인스턴스를 구문 분석해야 합니다.

React-Router v4(또는 그 이상) 버전으로 애플리케이션을 실행하는 경우 다음 코드에서 원하는 결과를 얻을 수 있습니다.

const queryToStr = require('query-string');
const result = queryToStr.parse(useLocation().search);

useLocation() 후크 덕분에 이 코드가 훨씬 깔끔해 보입니다.