필터나 키워드를 통해 검색을 할 경우, url이 조건에 맞게 변하는 것을 구현해보았습니다.
모달창에서 특정 조건을 체크하고 검색버튼을 누르게 될 경우 해당 필터링에 해당하는 데이터를 뿌려주는 것에는 성공을 했지만 url에도 어떤 조건으로 필터링이 들어갔는지 보여주기 위해 이 부분도 표시를 해주기로 했습니다.
기존에 url을 변경하지 않는 방식은 다음과 같았습니다.
const handleSubmit = () => {
const queryParameter = getFormatParams();
setIsOpenModal(prev => !prev);
fetch(`http://10.58.4.51:8000/accommodations${queryParameter}`)
.then(res => res.json())
.then(res => setProductInfo(res));
};
이렇게 하게 될 경우 문제점은 props로 여러 컴포넌트를 거쳐 해당 필터 모달이 존재하는 부분까지 내려와야 한다는 문제가 있었고, 또 하나는 위에서 말한 것처럼 url에 필터링에 대한 정보가 들어가지 않는다는 것이었습니다.
두 가지 문제를 동시에 해결하기 위해 사용한 방법은 useNavigate
와 useLocation
훅을 사용하는 것이었습니다.
const handleSubmit = () => {
const queryParameter = getFormatParams();
setIsOpenModal(prev => !prev);
navigate(`/productlist${queryParameter}`);
};
위에 코드를 보시면 useNavigate
훅을 변수에 넣은 navigate
를 통해 해당 주소로 이동하는 것을 볼 수 있습니다. /productlist
뒤에 들어간 ${queryParameter}
는 백엔드에서 요청하는 형식에 맞게 포맷을 바꾼 문자열입니다.
navigate
를 통해 해당 url로 이동을 하게되면 Router.js
에서
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Main />} />
<Route path="/productlist" element={<ProductList />} />
</Routes>
</BrowserRouter>
);
};
위와 같이 설정된 경로에 맞는 컴포넌트로 이동을 하게 됩니다.
그리고 해당 경로에 맞는 <ProductList />
컴포넌트는
const [productInfos, setProductInfos] = useState([]);
const location = useLocation();
useEffect(() => {
fetch(`http://10.58.4.51:8000/accommodations${location.search}`)
.then(res => res.json())
.then(res => setProductInfos(res));
}, [location]);
위와 같이 코드가 작성이 되어있는데 여기서 여기서 주의깊게 보아야 할 것은 useLocation
훅입니다. fetch 함수를 보시면 해당 api 주소 뒤에 location.search
라는 값이 있는데 이 부분이 바로 Query Parameter
입니다.
추가로 location 을 dependency array에 넣은 이유는 필터링이 될때마다 url이 바뀌게 되고 url이 바뀌게 되면 location안의 값들도 변화하게 되는데 그때마다 url로 보내진 조건에 일치하는 데이터를 백엔드로부터 받아오기 위함입니다.
예제와 함께 보시면 다음과 같이 나오게 됩니다.
마지막으로 순서를 다시 정리해보자면
useNavigate
훅을 사용해 주소 뒤에 백엔드로 보낼 QueryParameter
를 붙여서 이동하기location.search
를 통해 받아서 해당 api로 보내주기useEffect
의 의존성 배열에 location을 넣어주기가 될 것 같습니다.