<aside> 💡 목표: 현업에서 활약하고 있는 개발 선배님들의 실력 따라잡기

git: https://github.com/location132/GsShop-searchBar-Upgrade

</aside>

문제 발생

사용자가 검색을 시도할 때, 데이터베이스에서 연관 검색어를 받아와 표시하는 과정에서 화면의 번쩍임 현상이 발생하였습니다.

이 문제는 사용자가 "안녕"이라는 단어를 검색할 때, 'ㅇ', 'ㅏ', 'ㄴ', 'ㄴ', 'ㅕ', 'ㅇ' 총 6번의 화면이 setState 되는 문제였습니다. 이로 인해 사용자는 과도한 번쩍거림 현상을 경험하게 되어 UX가 저하되는 문제가 발생하였으며, 이를 개선하고자 합니다.

(해결한 화면은 아래에 첨부되어있습니다.)

gsSHop (문제 화면)

myApp( 문제화면)

RPReplay_Final1711885421.mov

화면 기록 2024-07-03 오후 12.07.45.mov

문제 해결

**접근:

잘못된 접근 방법**

1. 애니메이션 사용:

Flutter의 AnimatedOpacity 위젯을 사용해 연관검색어 리스트의 표시를 부드럽게 전환하려했습니다. 위젯의 투명도를 관리하는 전환 효과는 번쩍임 효과를 없애지 못하였습니다.

1.1. 잘못된 접근방법인 이유 서버에서 값을 새로 받아왔다면 state의 생명주기 setState를 통해 새로고침하는 순간 애니메이션보다 화면의 새로고침되는 번쩍임이 우선순위였기 때문이였습니다.

올바른 접근 방법

1. 상태관리 개선

검색어 입력 시 매번 화면을 갱신하는 대신 FutureBuilder와 Provider를 통해 상태 관리를 개선할 수 있는 방법이 있는지 고민해보았습니다. 사용자가 입력한 값을 리스트에 담아 사용자가 다음 초성을 입력했을 시, 리스트에 없다면 서버에 다시 한번 요청, 리스트에 있다면 리스트안에 있는 값을 재사용해 불필요한 서버와의 연결을 최소화 하고자 했습니다.