리액트 훅 - 유즈 파람 / 유즈서치 파람(리액트 라우터 돔)

특정 경로에 세부경로를 추가하거나 경로를 통해 추가정보를 보내는 경우가 많은데요. 리액트 라이브러리 중 하나인 리액트 라우터 돔의 훅을 사용하여 URL에 파라미터 및 추가정보를 설정하고 사용하는 방법을 보겠습니다.

프로젝트 구성하기

리액트 앱 생성

리액트?

라우터 구성

리액트 라리브러리 - 리액트 라우터 돔

유즈 파람

파라미터 설정

라우트 경로에 아래 형태로 파라미터 추가 (복수의 파라미터 추가가능)

/:<parameterName>

파라미터 사용하기

파라미터를 설정한 컴포넌트로 이동하여 유즈 퍼램 훅을 가져오고 초기화합니다

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

const param = useParams()

파라미터 사용은 아래처럼 초기화한 변수명에 설정한 파라미터명으로 합니다

param.<parameterName>

유즈 서치 파람

경로에 부가되는 추가정보를 쿼리라고 합니다. 쿼리는 키와 값으로 구성되며 복수의 퀴리를 사용할 수 있습니다. 최초 쿼리는 '?' 뒤에 오고 이후 추가되는 쿼리들은 '&'로 연결합니다.

쿼리 추가하기

예를 들어, 아래와 같은 경로에 name과 location을 추가정보로 보내는 경우

이동하는 모듈의 링크에 아래와 같이 키와 값을 경로에 추가합니다.

<Link to={'/contact?listingName=name&listingLocation=location'}>Go</Link>

 

쿼리 사용하기

쿼리는 유즈서치 파람이라는 훅을 사용하여 활용 가능합니다.

 

해당 경로로 도착하는 컴포넌트에 유즈서치 퍼램 훅 가져오기

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

유즈스테이트처럼 값과 값을 수정하는 변수의 형태로 초기화

const [searchParams, setSearchParams] = useSearchParams()

사용할 쿼리를 아래와 같이 키를 통해 사용

searchParams.get('listingName')

이상으로 리액트 라이브러리 리액트 라우터 돔의 훅을 사용하여 세부경로 정보를 활용하는 방법을 보았습니다.

---

참고

 

Traversy Media - YouTube

Traversy Media