카카오 주소 검색 API

전에 카카오(다음)에서 제공해주는 주소 검색을 가져와 사용하는걸 적었던 적이 있다.

 

하지만 이번에는 거기서 만들어주는것을 사용하는것이 아닌 카카오에서 제공해주는 주소 검색 api를 활용해 내가 만든 화면에서 사용자가 입력해주는 값에 따라 자동완성이 가능하도록 제작을 해보았다.

 

우선 당연히 카카오 api를 발급해줘야 한다.

이후에 

https://dapi.kakao.com/v2/local/search/address.json?query={query}

를 활용해 값을 주고 받게 될 것이다.

 

fetch로 보자면

fetch(`https://dapi.kakao.com/v2/local/search/address.json?query=${searchTerm}`, {
  headers: {
    Authorization: 'KakaoAK YOUR_API_KEY',
  },
})
  .then(response => response.json())
  .then(data => {
    ...
  });

이런식으로 나오게 될 것이다.

 

검색값으로 예를 들어 '강남' 이라고 보낸다면 아래 사진처럼 값이 최대 15개가 오게 될 것이다.

 

여러 값들을 제공해주니 필요한 부분만 사용하면 된다.

 

무료 플랜 기준으로는 하루 호출 제한은 10만회로 왠만하면 넉넉하게 사용할 수 있을 것이다.

 

만약 유저가 타이핑을 할 때마다 통신이 가 만약 10만회를 다쓰게 될 수 있으니 이도 방지를 해주면 좋다.

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedSearchInput(searchInput);
    }, 300);

    return () => {
      clearTimeout(handler);
    };
  }, [searchInput]);

이런식으로 디바운싱 처리를 해주면 된다.

 

더 좋은 방법이 있다면 사용해주면 좋다.

 

 

 

이런저런 프로젝트를 하면서 느낀점이 하나 있다.

카카오가 역시 대단한거 같다..

매번 카카오api는 한번씩은 꼭 사용하는 기분이 든다..

맵을 사용하려고 여러가지를 찾아봐도 카카오만큼 깔끔하게 사용하기 편하게 해둔곳이 없었다.

 

그러고보니 까먹고 있었는데 지금 이 글을 작성하는곳도 카카오네..