검색 필터 상태를 저장하기 위한 useState는 필요하지 않을 수 있습니다. (feat. URL QueryString)

검색 기능에는 타입, 기간, 키워드 등... 서비스에 따라 많은 필터 기능이 필요할 수 있습니다. 혹시 이 필터 상태를 저장하기 위해 useState를 사용하고 계신가요? 필터 별 useState를 선언하거나, 객체를 만들어서 하나의 useState로 관리할 수도 있겠죠. 어쩌면 hook을 활용해서 재사용하고 있을 수도 있습니다. 하지만 많은 상황에서 그건 필요하지 않을 수 있습니다.

URL QueryString을 상태 저장소로 이용하면 됩니다. URL QueryString을 쉽게 제어할 수 있는 hook을 만들고, 필터 상태를 설정하는 컴포넌트에 key값을 전달합니다. 이 컴포넌트는 전달받은 key값을 사용해서 QeuryString의 값을 사용하고 제어하며, 리렌더링 될 것입니다.

이렇게 구현된 컴포넌트는 URL과 통신하는 독립적인 단위가 되어 쉽게 재사용될 수 있습니다. 특히 CMS나 많은 데이터를 조회하고 다루는 서비스에서 빠르게 재사용될 수 있다는 것은 매우 큰 장점입니다.

URL을 상태 저장소로 사용함으로써 특정 필터가 설정된 조회 페이지에 바로 접근할 수도 있습니다. 사용자는 북마크 등을 통해 활용할 수 있으며, 서비스 내에서도 유연하게 리다이렉트 시킬 수 있게 됩니다. SEO적으로는 Canonical URL을 통해 대표 URL을 지정해 줄 수 있습니다.

프런트엔드 개발자에게는 URL이라는 저장소가 있습니다. 컴포넌트 간 상태를 효율적으로 관리하기 위해 전역 Store를 사용하는 것처럼 이 부분도 효과적으로 사용될 수 있습니다. 사용자에게 숨겨져야 하는 데이터가 아니라면 말입니다.

이는 요즘 렌더링이 효율적으로 발전해서 과거처럼 페이지가 바뀔 때마다 새로 모든 데이터를 불러오지 않기 때문에 가능해졌다고 생각하며, 필요하다면 History Stack을 관리하는 방안에 대해서 생각하는 것도 좋을 것 같습니다.

URL을 활용하는 방안에 대해 어떻게 생각하시나요?

다양한 생각을 기다리고 있겠습니다. :)