[Project-MyJejuStay-React] url에 필터링 조건 붙이기

Seokkitdo·2022년 2월 19일
1

문제해결

목록 보기
4/6
post-thumbnail

필터나 키워드를 통해 검색을 할 경우, 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에 필터링에 대한 정보가 들어가지 않는다는 것이었습니다.

두 가지 문제를 동시에 해결하기 위해 사용한 방법은 useNavigateuseLocation 훅을 사용하는 것이었습니다.


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로 보내진 조건에 일치하는 데이터를 백엔드로부터 받아오기 위함입니다.

예제와 함께 보시면 다음과 같이 나오게 됩니다.

마지막으로 순서를 다시 정리해보자면

  1. 버튼 클릭 시 useNavigate 훅을 사용해 주소 뒤에 백엔드로 보낼 QueryParameter를 붙여서 이동하기
  2. 해당 url 로 이동이 되었다면 useLocation을 통해 url에 달려있는 조건을 location.search를 통해 받아서 해당 api로 보내주기
  3. url이 변화할 때마다 필터링된 데이터를 백엔드로부터 받아와야 하기 때문에 useEffect의 의존성 배열에 location을 넣어주기

가 될 것 같습니다.

profile
어제보다 성장해 나가고 싶은 개발자

0개의 댓글