Store와 Router를 사용한 상품목록 querystring 관리 - woowa-techcamp-2021/store-4 GitHub Wiki

상품목록를 불러오려면?

• 카테고리 또는 검색어
• 정렬방법
• 페이지

문제점

• 새로운 상품목록을 요청하는 컴포넌트가 산재해 있어 공통으로 관리할 상태가 필요했다
• 카테고리가 변경됐을때 정렬방법, 페이지를 초기화하거나 검색어가 입력됐을때 카테고리를 없애는 등 상태 변경에 따른 사이드이펙트가 많았다
• 새로고침이나 앞으로, 뒤로가기 시 이전 옵션을 유지하기 힘들었다

해결방법

• optionStore를 통해 상품목록 조회에 필요한 옵션을 전역으로 관리하며 각 옵션의 값이 바뀔 때마다 필요한 사이드이펙트를 실행
• optionStore의 메서드를 호출하고 querystring에 반영하는 custom hook 정의
• Component에서는 특정 옵션의 값이 변경될때 custom hook을 사용해 전달
• 페이지에서 querystring을 파싱하여 상품목록 조회

⚠️ **GitHub.com Fallback** ⚠️