배경
안전진단 현장 추가 모달에서 건물명 자동완성(Autocomplete) 기능을 작업하고 있었다.
자동완성 된 데이터를 선택하면 시설물번호·고유번호·건물 ID가 처음 선택할 때만 비고, 두 번째부터는 잘 찍히는 버그가 있었음.
원인
선택한 순간 buildingName이 전체 건물명으로 들어가고, useDebounce 때문에 300ms 뒤에 debouncedKeyword도 그 값으로 바뀜.
그래서 useGetSafetyAutocomplete(type, debouncedKeyword) 쿼리 키가 바뀌면서 새 요청이 나가고, 그동안 해당 키의 data가 없어서 buildingAutocompleteData가 잠깐 undefined가 됨.
그래서 find 실패 → 필드 비어 보이는 거였음.
해결 (아직아님)
쿼리쪽에 다음과 같이 한 줄만 추가해줬다.
placeholderData: keepPreviousData,@tanstack/react-query에서 keepPreviousData import 해서 위 옵션만 useQuery에 넣어줌.
키가 바뀌어도 새 데이터 오기 전까지 이전 쿼리 data를 그대로 써주는 옵션이라서,
선택 직후에도 buildingAutocompleteData가 undefined로 안 바뀜.
그래서 모달 쪽 코드는 손대지 않고, 훅 한 군데만 수정해서 해결하였다.!!
!!! 이렇게 했더니 100% 된 건 아니었다
keepPreviousData를 쓰면 키가 어떤 값으로 바뀌어도 항상 이전 데이터를 보여줘서, 입력을 비우고 다시 치면 빈 키일 때도 이전 자동완성 결과가 그대로 남았다...
그래서 키워드가 비면 이전 데이터를 쓰지 않는 조건을 추가했다.
placeholderData: (previousData) =>
keyword.trim().length < 1 ? undefined : previousData,
})- keyword가 비어 있음 (다 지우고 다시 입력하려는 순간) → undefined 반환 → 이전 자동완성 데이터 안 보임
- keyword가 1글자 이상 (선택 직후 키가 바뀌었거나 입력 중) → previousData 반환 → 기존처럼 처음 선택할 때 빈 값 현상만 막아줌
Frontend developer