모달에서 검색 실행하면 새로고침되는 문제 해결하기

이런 식으로, 간병 예약 페이지에서 카카오맵 API를 이용해 병원 주소 검색을 하려고 했다.

그런데 테스트 페이지에서는 정상작동하던 컴포넌트가..
실사용 페이지에 불러오니까 자꾸 페이지가 새로고침되는 문제가 발생했다.

컴포넌트 구조는 똑같은데 대체 왜 테스트 페이지에서만 정상작동하는 것인지 머리를 싸맸다.

확인 1. useEffect 때문인가? -> X
확인 2. state를 이용해 지도 컴포넌트 on/off를 하기 때문인가? -> X
확인 3. form에 감싸여 있기 때문인가? => O!!
확인 3-1. e.preventDefault가 누락됐는가? -> X

모달 내부에서 검색을 위해 form을 제출하는데, 이 페이지는 예약을 위한 페이지이므로 form으로 감싸여 있다는 것이 문제였다. 그래서 검색 버튼을 누르면 form이 제출 처리가 되어서 페이지가 새로고침되는 것이었다.
그리고 이 흔적은 URL에 남아 있었다...

아무것도 없는 쿼리스트링

e.preventDefault는 꼬박꼬박 써 주었기 때문에 눈치채는 게 늦었다.

검색창의 form 태그를 없애서 해결했다. 어차피 검색은 keyword state를 불러와서 수행하는 거니까 문제는 없다.

최종적인 코드는 다음과 같다.

  <h4>병원 찾기</h4>
  <input type='text' value={keyword} onChange={(e) => setKeyword(e.target.value)} id='keyword' />
  <button
    type='button'
    onClick={searchPlaces}
  >
    검색
  </button>

 

더불어서 기록용으로 위 모달을 만드는 데 참고한 카카오맵 docs 링크를 추가한다.

API 가이드: https://developers.kakao.com/docs/latest/ko/local/common

키워드 검색 지도 샘플: https://apis.map.kakao.com/web/sample/keywordList/

상세주소 검색 기능: https://apis.map.kakao.com/web/documentation/#services_Geocoder_addressSearch

API 명세: https://developers.kakao.com/docs/latest/ko/local/dev-guide#address-coord