import React, { useState, useEffect, useCallback } from "react";
import logo from "./logo.svg";
import "./App.css";
import axios from "axios";
import { useQuery } from "@tanstack/react-query";
import api from "./api/api";
function App() {
const [search, setSearch] = useState<any>();
const { isLoading, isError, data, error } = useQuery({
queryKey: ["weather"],
queryFn: async () => await api(search),
staleTime: 5000,
});
console.log(isLoading);
console.log(data);
if (isLoading) return <div>조금만 기다려봐</div>;
if (isError) return <div>에러 났어</div>;
return (
<>
<button onClick={() => search}>검색</button>
<input
type="text"
onChange={(e) =>
setSearch(e.target.value)
}
/>
<div>{data[0].name}</div>
</>
);
}
export default App;
import React from "react";
import axios from "axios";
export default function api(city: any) {
console.log("호출 되고 있니", city);
const data = axios
.get(
`http://api.openweathermap.org/geo/1.0/direct?q=${
city === undefined ? "seoul" : city
}&limit=5&appid=${""}`
)
.then(function (response) {
console.log(response);
return response.data;
});
console.log(data);
return data;
}