-
개요 : 2중필터, 게시글순서 선택하면 초기값으로 인덱스가 초기화되는 현상,
검색페이지헤더,useStore가 존재하지 않았던 8월 5일에도 searchText가 포함된 파람값을 브라우저 주소창에 적었을경우
셀렉트버튼이나, headerBase 부분의 선택값을 기억못하고 리렌더링되는 현상이 발견되서
검색페이지나 useStore 문제가 아님을 파악,
(searchText 포함 안하면 리렌더는 발생안됨 제 생각에는 아무래도 preFetchQuery때문에 운이좋게도 이미 캐싱되어있어서 리렌더 안하는것 같음, param에 searchText값은 비어있기 때문에 searchText는 캐싱이 안되있어서 새로운 searchText가 포함되는 새로운 push발생시 리렌더링이 발생 ,
하지만 (ex)searchText=‘실업급여’ 이렇게 한번 push되어서 캐싱되어있다면 searchText=‘실업급여’ 에 한해서 리렌더링 발생 안함 ) -
문제점 : 2중필터,게시글순서 인덱스가 날라가는 문제는 useQuery 였는데 useQuery 시 (searchText)포함 되고 push 발동되는 순간 기존에 받아온 data 값이 소멸되버리고
새로운 data를 받아와서 그것을 렌더함,
이때 push실행되자마자 useQuery 기존의 data값이 소멸되므로 data가 순간적으로 존재하지 않게되는 상태 발생함 -> 그 후 로딩컴포넌트가 발동되고
모든 돔이 화면이 번쩍이면서 초기화 되버리면서
select버튼(2중필터,게시글순서) 값 또한 초기화되서
브라우저가 기존에 자신이 새롭게 선택한 인덱스를 기억못하고 초기값으로 되돌려버림
그리고 마지막으로 useQuery에서 새로운 data를 받아와서 화면에 렌더시킴 -
해결방법 : useQuery 3번째 인자값에 { keepPreviousData: true }, 추가한다면
새로운 push가 발동되도 기존 data를 소멸시키지 않으므로 로딩단계로 빠지지않고
새로운 data가 올때까지 기다렸다가
새로운 data를 받아오면 기존data에서 새로운data로 변경 후 화면에 적용시킴
그래서 2중필터나 게시글순서처럼 push가 발동되도 해당 페이지 모든 돔이 초기화 되는것을 방지시킬 수 있음 -
결론 : ListHeaderBase나 이중필터 select버튼으로 새로운 data를 Push 해서 불러올때 버튼이 초기화된다면 useQuery 3번째 인자에 { keepPreviousData: true }을 추가 해보실것을 추천
일단 검색키워드 관련된 페이지의 useQuery에는 해당 인자값 추가
