[LG CNS AM Inspire Camp 1기] React (10) - [Routing] useParams & useSearchParams
LG CNS AM Inspire 1기
INTRO
이전 포스팅에서 BrowserRouter에 대해서 간단한 개념을 살펴봤다.
동적 라우팅을 살펴보기 위해서는 URL로 전달되는 값을 사용하는 방법을 알아야 한다.
이번 포스팅을 통해 URL로 전달되는 데이터를 사용하는 훅인 useParams와 useSearchParams 훅을 살펴보자 👀
1. 가변 데이터 전달 방법
개발을 하다보면 URL이 변경됨에 따라 컴포넌트에서 사용하는 데이터가 변경되는 경우가 있다.
즉, 사용자가 데이터를 요청 했을 때 주소를 통해서 데이터를 넘겨주고 싶은 상황이 있는 것이다.
이 때, 크게 2가지 방법을 사용할 수 있다.
💡 파라미터
첫 번째로는 파라미터로 전달하는 방법이 있다.
간단한 예시는 다음과 같다.
Example
~~/profile/honggildong/23
이처럼 / 를 사용해서 넘겨주고 싶은 데이터들을 구분하여 전달하는 방법이다.
💡 쿼리 문자열 (query string)
다음으로는 쿼리 문자열을 사용하는 방법이 있다.
마찬가지로 간단한 예시는 다음과 같다.
Example
~~/profile?name=honggildong&age=23
?를 사용해서 Query String 부분을 정의하고 이후부터 정해진 규칙에 맞춰 데이터를 전달하는 방법이다.
위에서 사용한 예시들은 동일하게 name과 age를 각자의 방법으로 넘겨주고 있다.
위 두가지 방법은 동적으로 데이터를 넘겨줄 수 있는 기본적인 방법이니 알아두자!
2. useParams
이제부터는 URL을 통해 넘어온 데이터들을 사용하기 위한 방법을 알아보려고 한다.
useParams는 이름에서 알 수 있다시피 리액트 훅이다.
우선 코드를 통해 예시 상황을 한번 만들어보자
💡 Example - 가변 데이터 1개
Sample Code
// App.jsx export default function App() { return ( <BrowserRouter> <ul> <li> <Link to={"/mrgo"}>고길동 프로필</Link> </li> <li> <Link to={"/mrhong"}>홍길동 프로필</Link> </li> </ul> <Routes> <Route path="/:userId" element={<Profile />} /> </Routes> </BrowserRouter> ); }
// Profile.jsx import React from "react"; import { useParams } from "react-router-dom"; const Profile = () => { const { userId } = useParams(); return ( <div> <p>URL 데이터 : {userId}</p> </div> ); }; export default Profile;
Result View
App.jsx에서 <Route> 컴포넌트에서 path props에 "/:userId"를 넘겨준다.
눈치 챘겠지만 :userId와 같은 형식으로 앞으로 사용할 변수명을 지정해주는 것이다.
다음으로 App.jsx에서 정의된 <Link> 컴포넌트의 to를 보면 각각 /mrgo, /mrhong으로 url 매핑이 되어있는 것을 확인할 수 있다.
마지막으로 Profile.jsx에서 useParams 훅을 호출하여 변수에 지정된 값을 가져오고 있다.
// Profile.jsx
const Profile = () => {
const data = useParams();
console.log(data);
...
};위 코드처럼 Profile.jsx를 수정하고 콘솔에 넘어오는 값을 찍어보면 다음과 같이 순수한 객체 형태로 값이 넘어오는 것을 확인할 수 있다.
이처럼 라우팅과 URL을 통해 데이터를 넘겨주고, 컴포넌트에서는 URL을 통해 넘어온 데이터를 훅을 호출하여 사용할 수 있다.
💡 Example - 가변 데이터 여러개
가변 데이터를 여러개 사용하는 방법은 위 방법의 단순한 응용이다.
위 예제 코드에서 변경된 부분만 살펴보자
Sample Code
// App.jsx export default function App() { return ( <BrowserRouter> <ul> <li> <Link to={"/mrgo/23/Seoul"}>고길동 프로필</Link> </li> <li> <Link to={"/mrhong/100/Busan"}>홍길동 프로필</Link> </li> </ul> <Routes> <Route path="/:userId/:age/:live" element={<Profile />} /> </Routes> </BrowserRouter> ); }
// Profile.jsx import React from "react"; import { useParams } from "react-router-dom"; const Profile = () => { const { userId, age, live } = useParams(); return ( <div> <p>userId : {userId}</p> <p>age : {age}</p> <p>live : {live}</p> </div> ); }; export default Profile;
Result View
눈여겨봐야할 부분은 바로 App.jsx의 <Route> 컴포넌트의 path에서 여러개의 변수가 정의되었다는 것이다.
변경된 URL 매핑 방법에 따라 <Link> 컴포넌트도 다르게 수정했다.
마지막으로 Profile.jsx에서 useParams훅을 사용하여 데이터를 각각 불러와서 사용하면 된다.
(어려울 것 없으니 사용 방법만 숙지하자)
2. useSearchParams
위에서 사용한 useParams는 파라미터 방식으로 가변 데이터가 넘어올 경우 사용하는 훅이다.
반대로 쿼리스트링 방식으로 데이터가 넘어오게 되면, useSearchParams 훅을 사용한다.
💡 Example
이전과 동일한 예시 코드를 살펴보자
Sample Code
// App.jsx import { Route } from "react-router-dom"; import { Routes } from "react-router-dom"; import { BrowserRouter } from "react-router-dom"; import { Link } from "react-router-dom"; import Profile from "./example/Profile"; export default function App() { return ( <BrowserRouter> <ul> <li> <Link to={"/?name=mrgo"}>고길동 프로필</Link> </li> <li> <Link to={"/?name=mrhong"}>홍길동 프로필</Link> </li> </ul> <Routes> <Route path="/" element={<Profile />} /> </Routes> </BrowserRouter> ); }
//Profile.jsx import React from "react"; import { useSearchParams } from "react-router-dom"; const Profile = () => { const [searchParams, setSearchParams] = useSearchParams(); const name = searchParams.get("name"); return ( <div> <p>userId : {name}</p> </div> ); }; export default Profile;
Result View
useParams를 사용한 첫번째 예시와는 다르게 <Route> 컴포넌트에 변수를 지정하는 추가적인 URL(ex. :userId)이 필요 없어진다.
반면, <Link> 컴포넌트에서 쿼리 스트링 문법에 맞춰 URL을 전달해준다.
마지막으로 Profile.jsx에서 useSearchParams 훅을 호출하여 값을 사용한다.
💡 useSearchParams 특징
여기서 눈여겨봐야할 부분은 다음과 같다.
useSearchParams 특징
- 훅의 반환값이 useState와 같은 배열 형태이다.
- 쿼리스트링의 값을 사용하기 위해서는 추가적인 메서드 호출이 필요하다. (ex.
~~.get('name'))
Profile.jsx에서 사용한 아래 코드를 조금 더 살펴보자
`const [searchParams, setSearchParams] = useSearchParams();1. searchParams
배열 형태로 반환되는 첫번째 값은 쿼리 파라미터를 조회하거나 수정하는 메서드들이 담긴 객체를 반환한다.
위 코드에서
searchParams을 콘솔에 찍어보면 다음과 같다.Console View
- get 메서드를 통해 특정 쿼리 파라미터를 조회
- set 메서드를 통해 특정 쿼리 파라미터를 업데이트
- 만약 조회 시 쿼리 파라미터가 존재하지 않는다면 null을 반환
자주 사용하는 get과 set을 살펴보면 함수로 정의되어있음을 확인할 수 있다.
우리는 내부적으로 정의된 이 메서드를 호출하여 값을 사용할 수 있는 것이다.
2. setSearchParams
훅의 두번째 반환값은 쿼리 파라미터를 객체 형태로 업데이트할 수 있는 setter 함수를 반환한다.
위 코드에서
setSearchParams는 useState와 동일한 사용 방법을 갖는다.한가지 특징으로는 setSearchParasm를 사용하여 searchParams를 변경하면 상태가 변경되기 때문에 리렌더링이 발생한다.
사용자 액션에 따라 url 파라미터를 변경시키고 이에 맞춰 새로운 컴포넌트를 리렌더링 시켜야할 경우 사용된다.
정리하자면, 파라미터 전달 방식처럼 파싱 작업을 걸칠 필요 없이 파싱 결과가 첫번째 값에 들어있기 떄문에 그냥 메서드를 호출해서 사용하기만 하면 된다 👊
OUTRO
이번 포스팅에서는 리액트에서 URL로 데이터를 넘길 때 사용할 수 있는 훅을 살펴봤다.
useParams와 useSearchParams말고도 JavaScript에서 기본적으로 제공하는 API인 URLSearchParams를 직접 호출하여 사용할 수 있다.
즉, 훅은 개발자 편의를 위해 개발된 것이니 무조건 이걸 알아둬야하는 것은 아니다.
엄청 많은 훅들이 있으니 상황에 맞춰 필요한 훅들을 찾아보는 연습을 해보자 📖
