인프런 커뮤니티 질문&답변

import {useEffect, useState} from 'react';
import axios from 'axios';
import {LatLng} from 'react-native-maps';
import Config from 'react-native-config';

type Meta = {
  total_count: number; // 검색어에 검색된 문서 수
  pageable_count: number; // total_count 중 노출 가능한 문서 수 (최대: 45)
  is_end: boolean; // 현재 페이지가 마지막 페이지인지 여부
  same_name: {
    region: string[]; // 질의어에서 인식된 지역의 리스트
    keyword: string; // 질의어에서 지역 정보를 제외한 키워드
    selected_region: string; // 인식된 지역 리스트 중, 현재 검색에 사용된 지역 정보
  };
};

export type RegionInfo = {
  id: string; // 장소 ID
  place_name: string; // 장소명, 업체명
  category_name: string; // 카테고리 이름
  category_group_code: string; // 중요 카테고리만 그룹핑한 카테고리 그룹 코드
  category_group_name: string; // 중요 카테고리만 그룹핑한 카테고리 그룹명
  phone: string; // 전화번호
  address_name: string; // 전체 지번 주소
  road_address_name: string; // 전체 도로명 주소
  x: string; // X 좌표값, 경위도인 경우 longitude (경도)
  y: string; // Y 좌표값, 경위도인 경우 latitude (위도)
  place_url: string; // 장소 상세페이지 URL
  distance: string; // 중심좌표까지의 거리 (단, x,y 파라미터를 준 경우에만 존재)
};

type RegionResposne = {
  meta: Meta;
  documents: RegionInfo[];
};

function useSearchLocation(keyword: string, location: LatLng) {
  const [regionInfo, setRegionInfo] = useState<RegionInfo[]>([]);
  const [pageParam, setPageParam] = useState(1);

  useEffect(() => {
    (async () => {
      console.log('kakao : ' + Config.KAKAO_REST_API_KEY);
      console.log('google : ' + Config.GOOGLE_API_KEY);

      console.log(location.latitude, location.longitude);
      console.log(
        `https://dapi.kakao.com/v2/local/search/keyword.json?query=${keyword}&y=${location.latitude}&x=${location.longitude}&page=${pageParam}`,
      );
      try {
        const {data} = await axios.get<RegionResposne>(
          `https://dapi.kakao.com/v2/local/search/keyword.json?query=${keyword}&y=${location.latitude}&x=${location.longitude}&page=${pageParam}`,
          {
            headers: {
              Authorization: `KakaoAK ${Config.KAKAO_REST_API_KEY}`,
            },
          },
        );

        setRegionInfo(data.documents);
      } catch (error) {
        if (axios.isAxiosError(error)) {
          if (error.response) {
            console.error(error.response.data);
            console.error(error.response.status);
            console.error(error.response.headers);
          } else if (error.request) {
            console.error(error.request);
          } else {
            console.error(error.message);
          }
        } else {
          console.error(error);
        }
      }
    })();
  }, [keyword, location, pageParam]);

  return {regionInfo};
}

export default useSearchLocation;

저도 같은 버그 있었고, 해결한 방법 공유합니다

1. Reset iOS Simulator

If you are using an iOS simulator, you can reset it to clear the cache:

• Open the ios Siumulator

• In the top menu, go to Device > Erase All Content and Settings....

• Confirm the action to reset the simulator.

2. Remove and Reinstall react-native-config

If the issue persists, consider removing and reinstalling react-native-config:

npm uninstall react-native-config
npm install react-native-config --save

cd ios
xcodebuild clean
cd ..
npx pod-install
npx react-native run-ios

싹 밀어버리고 다시 빌드하니까 잘 되네요, simulator, xcode 캐시 문제인것 같습니다

저도 같은 증상이었는데

IOS 빌드 다시하니 해결 됐습니다!

https://github.com/dydals3440/MatZip

깃허브 주소 같이 전달드립니다!

import SearchInput from '@/components/common/SearchInput';
import useSearchLocation from '@/hooks/useSearchLocation';
import useUserLocation from '@/hooks/useUserLocation';
import React, {useState} from 'react';
import {Keyboard, StyleSheet, View} from 'react-native';

const SearchLocationScreen = () => {
  const [keyword, setKeyword] = useState<string>('');
  const {userLocation} = useUserLocation();
  const {regionInfo} = useSearchLocation(keyword, userLocation);

  const handleChangeKeyword = (text: string) => {
    setKeyword(text);
  };

  return (
    <View style={styles.container}>
      <SearchInput
        autoFocus
        value={keyword}
        onChangeText={handleChangeKeyword}
        placeholder="검색할 장소를 입력하세요."
        onSubmit={() => Keyboard.dismiss()}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
});

export default SearchLocationScreen;

import axios from 'axios';
import {useEffect, useState} from 'react';
import Config from 'react-native-config';
import {LatLng} from 'react-native-maps';

type Meta = {
  total_count: number;
  pageable_count: number;
  is_end: boolean;
  same_name: {
    region: string[];
    keyword: string;
    selected_region: string;
  };
};

export type RegionInfo = {
  address_name: string;
  category_group_code: string;
  category_group_name: string;
  category_name: string;
  distance: string;
  id: string;
  phone: string;
  place_name: string;
  place_url: string;
  road_address_name: string;
  x: string;
  y: string;
};

type RegionResponse = {
  meta: Meta;
  documents: RegionInfo[];
};

function useSearchLocation(keyword: string, location: LatLng) {
  const [regionInfo, setRegionInfo] = useState<RegionInfo[]>([]);
  const [pageParam, setPageParam] = useState(1);
  console.log(keyword, location);
  useEffect(() => {
    (async () => {
      try {
        const {data} = await axios.get(
          `https://dapi.kakao.com/v2/local/search/address.json?query=${keyword}&y=${location.latitude}&x=${location.longitude}&page=${pageParam}`,
          {
            headers: {
              Authorization: `KakaoAK ${Config.KAKAO_REST_API_KEY}`,
            },
          },
        );
        console.log('data', data);
      } catch (error) {
        console.log(error);
      }
    })();
  }, [keyword, location]);

  return {regionInfo};
}

export default useSearchLocation;

GOOGLE_API_KEY=키값들
KAKAO_REST_API_KEY=키값들