카카오 지도 api의 장소 이름 불러오기를 활용한 자동완성 기능 구현 중 input 첫 글자 입력의 반응이 느리게 나타나던 문제

JH.P·2022년 5월 2일
0
  • 제목과 같이 input 태그의 value에 검색어를 부여하고, onChange를 통해 검색어에 따라 카카오 api에 쿼리를 보내서 정보를 받아오는 과정을 통해 자동완성 기능을 구현하였다.
  • input 태그 입력 시 첫 글자의 입력 반응이 느리게 나타나는 문제가 발생하였다.
  • input 태그에 value에 들어가는 초기값을 null로 할당하여 해결을 시도했지만, controlled 되는 input 태그엔 null이나 undefined가 들어올 수 없다는 오류가 발생하였다
    • 초기값을 null로 바꾼 이유는, 초기값을 ''로 할당했을 시, input의 value도 ''가 되고, 이렇게 되면 첫 글자 입력 시 버벅이게 되는 문제가 발생했었다.
  • 따라서 input의 value 속성은 제거하고, 자동완성된 검색어 중 한 개를 클릭하면, 그 요소의 정보가 하단에 출력되도록 수정했다.
    • 기존엔 자동완성 검색어 클릭 시 input의 value를 해당 자동완성 검색어로 수정하는 방식으로 구현했었다.
    • 하지만 여기에서 input의 value가 빈 문자열이여서 첫 글자 입력 시 반응이 느리게 나타나던 문제가 발생하였다. 이를 지우고 위와 같은 방법으로 수정하여 진행하였더니 입력이 깔끔해졌다.
profile
꾸준한 기록

0개의 댓글