[React] - 카카오 api를 활용하여 주소검색 기능 구현

📌애플리케이션 등록

먼저, 카카오 개발자 페이지에서 애플리케이션을 등록해야 합니다. 등록하는 방법은 아래 링크를 참고하자.

• 카카오 로컬 API 시작하기

Kakao Developers

---

📌카카오 로컬 API Javascript SDK 설치

카카오 로컬 API를 사용하기 위해서는 Javascript SDK를 설치해야 한다. 'npm' 패키지 매니저를 사용하여 설치하자.

npm install kakao-sdk

---

📌주소 검색 컴포넌트 구현

import React, { useState } from 'react';
import { KakaoMap } from 'react-kakao-maps';
import { KakaoSDK } from 'kakao-sdk';

const App = () => {
  const [keyword, setKeyword] = useState('');
  const [searchResult, setSearchResult] = useState([]);

  const handleSearch = async () => {
    const places = await KakaoSDK.Places.keywordSearch(keyword);

    setSearchResult(places);
  };

  return (
    <div>
      <input type="text" value={keyword} onChange={(e) => setKeyword(e.target.value)} />
      <button onClick={handleSearch}>검색</button>
      {searchResult.length > 0 && (
        <ul>
          {searchResult.map((place) => (
            <li key={place.id}>{place.place_name}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default App;

위 코드에서는 ' kakaoMap' 컴포넌트와 'kakaoSDK'를 사용하여 주소 검색 기능을 구현한다. 'kakaoSDK.places.keyweordSearch' 메서드를 사용하여 검색어에 대한 주소 검색 결과를 받아올 수 있다. 이후 검색 결과를 출력하는 부분은 간단한 예시로, 실제로는 적절한 UI컴포넌트를 사용하여 검색결과를 더욱 보기좋게 출력해야한다. 

또한, 위 코드에서 사용된 'kakaoMap'과 'kakaoSDK'는 아래의 패키지를 설치해서 사용해야한다.

npm install react-kakao-maps kakao-sdk

위와 같이 주소 검색 컴포넌트를 구현하면, 사용자가 입력한 검색어를 바탕으로 카카오 API에서 주소 검색 결과를 받아와 화면에 출력하는 기능을 구현할 수 있다. 하지만 이외에도 카카오 API를 활용하여 주소 검색을 보다 다양하게 구현할 수 있는 방법들이 있다. 예를 들어, 지도 위에 검색 결과를 마커로 표시하거나, 자동완성 기능을 구현하는 등의 방법이 있다.