useSearchParams, useParams, useLocation, URLSearchParams

wil 1주차...
Admin_toggle_page만들기 과제 작업중
모든 기능에 뒤로가기 버튼을 눌렀을 때 이전에 작동했던 내용을 불러와야되는 상황이 있었다.

예를 들어
1 -> 2 -> 5 -> 뒤로가기
를 눌렀을 때 2번 페이지가 나와야되는 상황이다

처음에는 useNavigate로 모든 상황마다 URL을 갱신시켜서 새로운 주소를 받아오는 형식으로 작업을 진행했지만 코드가 복잡해지고 꼬이는 경우가 발생해서 어찌해야하나 하던 도중 같이 진행하고있던 분이 useSearchParams로 진행을 했다하여 알아보았다.

알아보는 김에 useParams, useLocation, URLSearchParams도 같이 알아보았다.

useParams는

• React Router에서 사용되는 훅(Hook)이다.
• URL경로의 매개변수를 읽을 수 있게 해준다.
• 동적 라우트 매칭을 사용할 때, 경로의 변하는 부분을 식별하고 해당 값을 컴포넌트에서 사용할 수 있게 해준다.

라고한다.
예를들어,
/user/:user_id 로 유저의 아이디 값을 얻고싶을 때,

const { id } = useParams(); 

로 사용하여 쉽게 얻어올 수 있다.

useParams는 현재 URL의 id값을 추출하여 컴포넌트에서 사용할 수 있게 해주는 것이다.

useSearchParamas는

• React Router에서 사용되는 훅(Hook)이다.
• URL의 쿼리 문자열(query string)을 읽고 쓰기 위해 사용된다.
• URL의 검색 매개변수(search parameters)를 관리할 수 있게 해주어
  URL을 통해 상태를 관리하고 해당 상태를 동기화할 수 있게 도와준다.

라고한다.
이 훅을 사용하면 URL의 쿼리 파라미터를 쉽게 다룰 수 있어, 페이지네이션, 필터링, 검색 등의 기능을 구현할 때 유용하다고한다.

찾았다.
이번 페이지네이션을 구현하면서 필요한 기능이다.

사용예제,

useSearchParams는 상태를 가지고 있다.

const [searchParams, setSearchParams] = useSearchParams();

저장 시,
useState와는 사용법이 다르다.
.set을 사용하여 key와 value를 설정해준다.

searchParams.set("key", value);

다음 setSearchParams를 사용하여 상태를 변화시킨다.
setSearchParams(searchParams);

받아오기
get에 key값을 이용해서 valeu를 받아온다.

const temp = searchParams.get("key")

받아온 값은 보여 줄수도 있고,
변화한 다음 다시 set으로 보내 줄수도있다.

useLocation는

• React Router에서 사용되는 훅(Hook)이다.
• 현재 브라우저의 위치 정보를 나타내는 location객체에 접근할 수 있게 해준다.
• 현재 URL의 정보를 담고 있으며, 경로(pathname), 검색쿼리(search),해시(hash)등의 정보를 포함하고 있다.
• useLocation을 사용하면 현재의 URL경로나 쿼리 파라미터 등의 정보를 읽을 수 있다.
• 라우팅 로직을 처리하거나, 현재 URL에 기반한 특정 동작을 실행할 때 유용하다.

라고한다.

사용예제,

const location = useLocation();
return (
	<div>
    	<p>현재 경로: {location.pathname}</p>
        <p>검색 쿼리: {location.search}</p>
        <p>해시: {location.hash}</p>

이러한 방식으로 사용이 가능하다.

URLSearchParams

• 웹API의 일부이다.
• URL의 쿼리 문자열을 쉽게 파싱하고 조작할 수 있는 유틸리티를 제공한다.
• 쿼리 문자열의 파라미터를 읽고,추가하고,수정하고,삭제할 수 있다.
• 쿼리 문자열 파싱: URL의 쿼리 부분을 분석하여 개별 파라미터로 접근할 수 있다.
• 쿼리 파라미터 추가, 수정, 삭제: 쿼리 문자열의 파라미터를 프로그래매틱하게 관리할 수 있다.
• 쿼리 문자열 조합: 모든 쿼리 파라미터를 조합하여 완전한 쿼리 문자열을 생성할 수 있다.

사용예제,
URLSearchParams를 사용할 때,
useLocation과 같이 사용하여 현재 주소의 쿼리 스트링 값을 받아왔다

const params = new URLSearchParams(location.search);
//페이지의 값을 받아올 때는
const pageParams = Number(params.get("page")

이러한 형식으로 받아왔다.

지금 과제를 진행하면서 페이지 네이션과 주소 히스토리 남기는 로직을
useSearchParams와 URLSearchParams, useLocation을 사용하여 작성을 했는데
지금 글을 작성하면서 생각해보니 useSearchParams만 사용하여 작성했어도 충분히 작동을 했을 것같다
기회가 되면 코드를 리팩토링하는 시간을 가져보는 것도 좋은 방법일 것 같다.

실제 사용 예시

// useSearchParams사용
const [searchParams, setSearchParams] = useSearchParams();

// perPage의 초기값을 설정
useEffect(() => {
	const perPage = Number(searchParams.get("per_page") || 20);
// 주소가 변경될 때마다 마운트
},[searchParams])

// 클릭된 값으로 주소의 per_page변경
const handlePerPageChange = (e) => {
        const newPerPage = e.target.value;
        searchParams.set("per_page", newPerPage);
        setSearchParams(searchParams);
    };
    
reuturn (
	 <SelectPerPage
         value={searchParams.get("per_page")}
         onChange={handlePerPageChange}
     >
         <Option value={20}>20</Option>
         <Option value={50}>50</Option>
     </SelectPerPage>
)

이런식으로 사용을 하였다.

3/10 수정사항

기존에 URLSearchParams로 사용했던 로직들을 useSearchParams로 변경하였다.
다행이 잘 작동한다.
변경한 내용은

// 이렇게 작성하여 사용한 것을
const params = URLSearchParams(location.search);
params.get('page');

// 이러한 형식으로 사용하였다
pagination({curPage, setCurPage}) => {
	const params = Number(curPage.get('page');
    }
    
//pagination의 사용은
const [searchParams, setSearchParams] = useSearchParams();

return (
	<Pagination curPage={searchParams} 
    			setCurPage={setSearchParams} >
    </Paginaion>

이러한 방식으로 state를 넘겨주었는데 잘한방법인지는 잘 모르겠어서
추후 더 찾아볼 예정이다.