Search params

URL 기반 필터

useSearchParams는 검색창과 카테고리 버튼의 값을 주소에 남겨 새로고침, 공유, 뒤로 가기에서도 같은 목록 상태를 복원한다.

목록 필터링 순환

URL state

사용자 입력

Electronics 버튼이나 검색창 입력이 현재 필터 조건을 만든다.

setSearchParams

category와 q 값을 URL 쿼리로 반영한다.

searchParams.get

렌더링 때 현재 URL에서 카테고리와 검색어를 다시 읽는다.

filteredProducts

읽은 조건으로 목록을 좁히고 결과 카드를 다시 표시한다.

직접 입력

/products?q=노트북으로 열어도 검색 결과가 바로 나온다.

뒤로 가기

이전 쿼리 문자열로 돌아가면 이전 필터 조합도 함께 복원된다.

공유 링크

필터 조건이 URL에 있으므로 다른 사람에게 같은 결과 화면을 전달한다.