왜 이렇게 고쳤는가?

이 코드는 사용자의 현재 위치와 관련된 기능을 수행하며, 객체 목록을 무한 쿼리로 가져오는 로직을 구현하고 있습니다. 리팩토링의 주된 목적은 다음과 같습니다.

코드 효율성 향상: 기존 코드에서 중복되는 로직을 제거하고, 가독성과 유지보수성을 높이기 위해 수정하였습니다.
향상된 오류 처리: 새로운 코드는 기존보다 정교한 에러 처리를 포함하고 있으며, 예기치 않은 상황에 대응할 수 있도록 설계되었습니다.
기능의 확장성 향상: 추후 기능 확장을 염두에 둔 설계 변경으로, 다양한 요구 사항에 유연하게 대응할 수 있습니다.

작성 코드 및 설명

상태 및 변수 선언

먼저, 사용자의 현재 위치를 저장하기 위한 상태와 토큰 정보, URL 등의 상수를 선언합니다.

const tokenStorage = new TokenStorage();
const HTTPS_URL = process.env.REACT_APP_API_MAIN_KEY;
const TOKEN = tokenStorage.getToken();

type Location = {
  latitude: number;
  longitude: number;
};

const [location, setLocation] = useState<Location>({
  latitude: 36.107157,
  longitude: 128.418008,
});

위치 정보 쿼리 및 객체 목록 쿼리

useQuery와 useInfiniteQuery를 사용하여 사용자의 현재 위치를 가져오고, 해당 위치를 기반으로 객체 목록을 무한 쿼리합니다.

const { data: address } = useQuery(["get-current-location"], locationAPI, {
  /* options */
});

const { fetchNextPage, data, hasNextPage } = useInfiniteQuery(
  ["get-object-list"],
  getListFnc,
  {
    /* options */
  }
);

Geolocation API 활용

useLayoutEffect를 사용하여 브라우저의 Geolocation API로 사용자의 현재 위치를 가져옵니다.

useLayoutEffect(() => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (props) => {
        /* logic */
      },
      null,
      {
        enableHighAccuracy: false,
        maximumAge: 0,
        timeout: Infinity,
      }
    );
  }
}, []);

최종 렌더링

cloneElement를 사용하여 자식 요소에 props를 전달하며, 필요한 데이터를 자식 컴포넌트에 주입합니다.

return cloneElement(children, { fetchNextPage, data, hasNextPage });

결론

이 리팩토링을 통해 코드의 효율성과 가독성이 향상되었으며, 기능의 확장성 역시 증가하였습니다. 이러한 과정을 통해 현대적인 React 개발 패턴을 적용하고, 더욱 견고하고 유연한 애플리케이션을 구축할 수 있게 되었습니다.