안드로이드 검색 깜박임 개선

향상된 사용자 경험을 위해 안드로이드 검색 페이지로의 전환과 검색 동작에 대한 딜레이를 개선하였습니다.

문제상황

다른 커머스의 검색페이지를 돌아봤을때 딱 검색과 관련된 것들만 포함되어 있습니다.

여기에 추가로 굳이 추가되어있자면 지난 검색어 목록 인기 검색어 정도 였습니다.

그러나 저희 서비스에서는 검색 페이지에서 많은것을 보여주고 또 조건에 따라 렌더링 되는 화면도 달라집니다.

탭도 3개가 존재하고 각각 다른 api 를 호출하고 있습니다.

최근 본 검색어와 최근 본 매물 또한 각각 다른 api 를 호출하고 있습니다.

탭은 스와이퍼 동작으로 구현되어 있고 검색페이지에 진입할때 탭 컨텐츠에 해당하는 모든 api 를 호출해서 데이터를 미리 받아와 사용하고 있습니다.

일단 필요에 의해서 추가된 컨텐츠들에 대해서는 당장에 줄이거나 개선하기엔 어려운 부분이 있습니다.

그럼 결국 기술적으로 이 문제들을 풀어야 합니다.

우선 하나씩 해결해보려고 합니다.

이 부분은 리액트쿼리를 사용하여 이전 데이터를 그대로 유지시키는 옵션을 추가하여 해결하고자 하였습니다.

그러나 한번에 해결되는건 없었죠

코드가 검색결과가 있을경우에만 결과목록이 노출되고 없을땐 숨김처리됩니다.

문제는 이러한 분기 처리동작이 탭컨텐츠에도 동일하게 적용되어 있는점입니다.

검색어 입력시 검색결과가 나타나고 사라지는게아니라 탭과 탭 컨텐츠 컴포넌트 또한 null 을 리턴하거나 컨텐츠를 그리거나를 검색결과와 함께 같이 반복합니다.

그리고 이러한 조건을 갖는 api 호출 분기분이 개별 컴포넌트내에서 따로 작성되어있었고

옵션또한 일일이 컴포넌트를 확인하면서 추가하고 조건또한 수정해줘야 했습니다.

동일한 조건에 의해서 움직이는데 관련 컴포넌트를 모두 확인하며 수정해야하는건 매우 비효율적이었습니다.

서치와 관련된 쿼리훅을 분리하고 관련 컴포넌트에서 공통으로 사용하도록 만들었습니다.

이렇게해놓고 그래도 이상하다 싶은 부분은 검색어를 입력하는데 왜 탭과 탭 컨텐츠 컴포넌트가 렌더링에 영향을 받는가 였습니다.

분기에따라 노출조건이 정해져있어 렌더링을 다시 해줄뿐만아니라 리액트쿼리 캐시최적화도 되어있지 않아 검색할때마다 탭 컨텐츠와 관련된 api 를 호출하고 있었습니다.

검색을할때는 굳이 리렌더링되거나 api 를 다시 호출할 필요가없는 부분이기때문에 해당 컴포넌트에서는 검색과 관련된 코드를 제거하였습니다.

이젠 검색시 검색결과목록만 리렌더링되고 쿼리캐시에의해서 이전결과 목록이 계속 보여지고 검색한 검색어와 목록만 변경되기때문에 훨씬 자연스럽고 네이티브한 경험을 사용자에게 줄 수 있었습니다.

전

후

전

후

전

후