[React Native] 카카오 REST API를 이용한 카카오 주소 검색 화면 구현하기

 

 

 

오늘은 위 사진처럼 주소의 일부 입력 시 유사 주소가 나오며 주소를 검색할 수 있는 방법에 대해서 작성해 보겠다.

개발 순서는 이렇다. 

 

1. 카카오 REST API  호출 

//지역 검색 API 호출
  const companyLocationGet = async () => {
    const url = `https://dapi.kakao.com/v2/local/search/address.json?query=${searchedLocation}&analyze_type=similar&page=1&size=30`;

    const headers = {
      Authorization: 'KakaoAK ${REST_API_KEY}',
      'Content-Type': 'application/json;charset=UTF-8',
    };

    try {
      const response = await fetch(url, {
        method: 'GET',
        headers: headers,
      });
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const data = await response.json();
      setCompanyLocationList(data.documents);
      // console.log(data);
    } catch (error) {
      console.error('Error fetching data:카카오 API', error);
    }
  };

 

 

1. header에는 Authorization에는 자신의 카카오 develop 계정에서 발급받은 API 키와 Content-type을 지정하여 호출해야 한다.

공식 문서 캡처

2. url 부분을 보면 query, analyze_type, page, size가 파라미터로 있는 것을 볼 수 있다. 이는 공식 문서에서 API 호출 시 전송해야 하는 쿼리 파라미터 4가지이다. 

query : 검색을 원하는 질의어 즉 내가 검색할 주소를 의미한다

analyze_type : 검색 결과 제공 방식이며 두 가지 옵션이 있다. 

• similar : 입력한 건물면 혹은 주소가 일부만 매칭될 경우에도 유사한 검색 결과들을 제공한다 (default)
• exact : 주소의 정확한 건물명이 입력될 경우에만 결과들을 제공한다.

page : 결과 페이지 번호

size : 한 페이지에 보일 문서의 개수이다.

 

사용자가 검색하기 위해 입력한 값을 저장하고 있는 searchedLocation을 query로 지정했다.

유사한 주소도 나오게 하기 위해 analyze_type에는 similar을 지정했다.

page와 size는 개인이 필요한 정보의 양에 따라서 지정하면 된다. 나는 유사한 주소 수소만 필요하기에 위와 같이 지정했다.

 

3. 1,2번 과정이 끝나고 API를 호출하면 결과 값이 오게 된다. 결과 값은 documents로 온다. 따라서 data.documents를 사전에 만들었던 CompanyLocationList에 저장했다. 참고로 직장 지역을 설정하기 위해 변수명을 이렇게 지정했다.

공식 문서 캡쳐

 

 

주소 검색을 위한 API 호출, 반환된 데이터 저장까지 필요한 과정이 끝났다. 이제 저장한 CompanyLocationList를 매핑하여 렌더링 하면 끝이다!

 

2. 결과 데이터를 렌더링

검색 결과를 매핑한 결과

 

나는 위 사진과 같이 주소 입력 시 유사 주소가 나오도록 해야 했다. 

따라서 검색 결과가 저장된 companyLocationList를 매핑하여 사진과 같이 유사 주소들이 전부 나오도록 했다.

{companyLocationList.map((address) => (
    <CompanyLocationBtn
      key={address.address_name}
      onPress={() => {
        onPressSelectedLocation(address.address_name); <!--선택된 주소 설정-->
        onPressSelectCompanyLocationsX(address.x);<!--선택된 주소의 위도 설정-->
        onPressSelectCompanyLocationsY(address.y);<!--선택된 주소의 경도 설정-->
        setUserPresentCompanyLocation(address.address_name);<!--현재 직장 지역 위치 설정-->
        companyLocationPut();<!--선택된 주소, 위도, 경도를 user service로 전송하는 함수-->
        handleDismissModalPress();<!--모달을 닫는 함수-->
        <!--주소 관련 정보는 아래 사진 참고-->
      }}
    >
      <CompanyLocationTitle>
        {address.address_name}
      </CompanyLocationTitle>
    </CompanyLocationBtn>
))}

 

간단히 말하면 내가 해야 하는 과정은 이렇다.

1. 주소 검색 시 유사 주소를 렌더링 하여 유저가 주소를 선택할 수 있도록 한다.
2. 특정 주소 선택 시 해당 주소의 주소명, 위도, 경도를 User service로 전송한다.
3. 선택된 주소를 아래 사진과 같이 화면에 렌더링 되도록 한다.

 

선택된 주소 렌더링

 

따라서 위 과정을 수행할 수 있도록 사전에 만들어둔 함수를 지정한 것이다. ( 중요하지 않다. )

공식 문서 캡처

 

3. 선택된 주소를 User service로 전송

//Bearer 토큰
  const authorization =
    'Bearer ${TOKEN}';

  //직장 지역명, 위도, 경도 호출
  const companyLocationPut = async () => {
    const url = ' ';

    const headers = {
      Authorization: authorization,
      'Content-Type': 'application/json',
    };

    const body = JSON.stringify({
      regionName: selectedLocation,
      longtitude: selectedCompanyLocationsX,
      latitude: selectedCompanyLocationsY,
    });

    try {
      const response = await fetch(url, {
        method: 'PUT',
        headers: headers,
        body: body,
      });
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const res = await response.json();
      console.log(res, selectedLocation);
    } catch (error) {
      console.error('Error fetching: 직장 지역명, 위도, 경도 전송', error);
    }
  };

 

지금 보니 코드 전체적으로 수정해야 하는 부분이 많다. API 호출 수도 줄여야 하고 정신이 오락가락할 때 작성한 코드라 엉망진창이다. 

전체 연결이 끝나면 리팩토링 해야겠다..😀

 

이상이다