#9 : 지도 검색

1. 지도 검색 기능

지도 검색 기능을 넣기 시작했다. 이미 막혔던 부분이라 현수님과 함께 진행했는데 다른 사람의 코드도 뜯어보고 이것저것 해보다가 검색기능에 성공했다. 아니 성공한 듯 했다... 뭔가 이상하다 싶었는데 검색할 때 한 글자 입력할 때마다 리스트가 갱신되는 건 괜찮은데 지도까지 계속 렌더되고 있었다... 그런데 이것저것 고쳐봐도 해결되지 않고 코드도 너무 길어서 오류 부분을 찾기 너무 힘들었다.

---

2. 지도 코드 전체 수정

카카오 문서에 있는 코드를 참고하다 보니 전혀 내가 쓴 코드 같지 않고 중구난방이란 느낌?이었다. 이 상태론 안 되겠다 싶어 일단 컴포넌트를 나눴다. map, search, cafeInfo 이렇게 나누고 useRef와 useImperativeHandle로 컴포넌트들끼리 함수를 엮고 Main.jsx에서 각 컴포넌트를 연결해주었다. useRef와 useImperativeHandle을 사용해보지 않아 어색했는데 사용해보니 굉장히 편리하다고 느꼈다. 따로 정리할 계획이지만 간단히 얘기하면 useRef는 DOM에 바로 접근할 수 있게 하고 useImperativeHandle은 부모가 보낸 ref, 자식이 맞춰 보낼 ref로 부모가 reference.current로 접속할 수 있게 맵핑을 해준다. 컴포넌트 간의 독립성을 보장해 준다. 코드를 모두 수정하고 나선 기능이 다 잘 작동되었다. 코드를 정리하고 정말 도움이 됐던 건 만약에 검색에서 문제가 생기면 바로 search 컴포넌트를 확인하면 되는 것이다. 앞으로는 코드를 어느 정도 짜면 컴포넌트를 나누는 것도 항상 생각해야겠다.