디자이너의 네이티브 앱 개발 도전기 #13

autocomplete 구현 #1

개발자에겐 1시간짜리 작업일 수 있다.

혹은 복붙 하면 10분짜리 작업일 수 있겠다.

나 같은 사람에겐? 30시간도 부족하다.

구현하는 방법도 모르고, 함수고 뭐고 아무것도 모른다.

오래도록 검색하고 물어보고 시도해보아 대략의 기술들을 알아내었다.

이 장황한 이야기는 Autocomplete for React Native 이야기이다.

대략 3화 정도를 차지할 것 같다.

일단

autocomplete 패키지를 찾아두었다.

실제로 앱 페이지 내에서 작동하는 것까지 구현을 해 둔 상태이다.

본격적으로 적용하기 위해 자세히 뜯어보던 중 문제를 발견하였다.

내 경우 autocomplete이 필요한 이유를 적어보자면,

1. 어떤 외쿡인이 있다고 치자.

2. 외쿡인은 서울을 놀러 가려고 날씨를 찾아보려 하지만 서울의 스펠링을 잘 모른다.

3. 앱의 지역 검색 기능을 활용하려고 한다.

4. 스펠링을 모르므로 seo까지만 타이핑했다.

5. 검색바 아래에 seo를 포함한 지역 리스트가 리스팅 된다.

이렇다.

어떻게 보면 필요 없고, 어떻게 보면 필요 있다.

지역명을 풀로 입력하고 검색 버튼을 눌러도 되고, 지역명 중 일부만 타이핑 해 검색 버튼을 눌러도 된다.

하지만 직관적으로 바로 보이는 게 편하지 않을까?

물론, autocomplete을 구현하다가 실패하면 버튼 처리 하긴 할 것이지만..

어찌 되었든 미리 찾아둔 패키지에서 찾은 문제는 다음과 같다.

api를 이용해 json을 fetch 하는 기능은 있지만 미리 json 셋을 fetch 해두었다가 json내에서 키워드를 이용해 리스팅 하는 수준이다.

하지만 내가 구현해야 하는 방법은 키워드가 입력될 때마다 쿼리를 쳐야 하고 실시간으로 json을 새로 받아 결과를 뿌려줘야 한다.

키워드 없이 json을 미리 fetch 해 둘 방법이 없다는 이야기다.

미리 저장해놓고 쓰느냐, 아니냐의 차이다.

결국 바닥부터 구현하기로 하고 필요한 구현 방법을 찾기 시작했다.

커뮤니티의 조언을 받아 몇 가지 정보를 받아두었다.

일단 그렇게 구현 시도해보시라!라는 긍정적인 답변을 받아둔 상태이다.

1. Textinput에 글씨를 3글자 이상 작성해야 쿼리를 시작한다. (쿼리의 무차별적 소모를 막기 위함)

2. 글자 하나하나 모두 쿼리를 시도하면 쿼리 소모가 너무 심하므로 타이핑이 끝나는 시점에 쿼리를 하기 위해 디바운스 처리한다.

3. 디바운스가 끝난 키워드는 state에 저장한다.

4. state는 componentDidUpdate에 저장하여 값이 변경됨을 인지할 수 있도록 한다.

5. state의 값이 변경되면 검색어로 쿼리를 한다.

6. fetch 된 결괏값은 화면에 리스트업 한다.

여기까지이다.

일단 오늘은 여기까지의 로직을 알아내느라 너무나 힘들었다.

실제로 내가 개발자가 된 기분이다.

오징어도 팔고 아귀포도 팔다가 이게 참.. 기분이 묘하다.

autocomplete 기능이 완료되면 리스트업 된 지역들 우측에 추가하기 버튼을 넣고

추가하기 버튼을 누르면 async 기능을 통해 local storage에 저장해 줄 예정이다.

참고로 메인화면의 디자인은 완료되었다.

밤이고 구름이 껴서 그런지 화려한 이미지가 전혀 구현되어 있지 않다.

모두 실제 데이터이고 실제 시뮬레이터에서 띄운 화면이다.