vite 및 react를 사용하여 날씨 앱을 빌드해 봅시다 - 3부

지도 상자 통합이 완료되었으므로 도시를 클릭할 때 새 페이지를 열고 싶습니다.

라우팅

npm install --save react-router-dom

새 경로를 만들고 두 페이지를 갖도록 기본 기능App을 업데이트해 보겠습니다.

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<MainPage />} />
        <Route path='/city' element={<CityPage />} />
      </Routes>
    </BrowserRouter>
  );
}

이제 링크를 클릭하면 새 페이지가 열리도록 목록을 약간 변경할 것입니다.

이를 위해 에 추가한 onClick를 제거하고 Link에서 react-router 구성 요소를 사용합니다.

const CityList = (props: CityListProps) => {
  return (
    <ListGroup>
      {props.cities.map((city) => (
        <ListGroup.Item key={city.name} action>
          <Link to={`/city?lat=${city.lat}&lng=${city.lng}`}>{city.name}</Link>
        </ListGroup.Item>
      ))}
    </ListGroup>
  );
};

우리는 도시를 식별하기 위해 위도와 경도만 사용할 것입니다. 따라서 새 페이지의 URL 매개변수로 전달하기만 하면 됩니다.

그 이유는 우리가 weatherbit.io API를 사용할 예정이고 lat/lng를 사용하는 것이 권장되는 방법이기 때문입니다(대부분의 날씨 API가 동일하게 작동한다고 생각합니다).

웨더빗 API

먼저 API 키를 받으려면 weatherbit에 계정을 만들어야 합니다. 무료이며 2분 정도 소요되며 신용카드나 그 어떤 것도 필요하지 않습니다.

완료되었으므로 하나의 엔드포인트( Current Weather API )만 사용할 것입니다.

매우 간단합니다.

const url = 'https://api.weatherbit.io/v2.0/current?lat=35.7796&lon=-78.6382&key=API_KEY'
const result = await axios.get(url);

앱으로 돌아가서 URL에서 위도와 경도를 가져와야 하므로 react-router를 사용하겠습니다.

import { useLocation } from 'react-router-dom';
// [...]

const location = useLocation();
// location.search will be similar to: ?lat=51.507322&lng=-0.127647
const [latqs, lngqs] = location.search.substring(1).split('&');
const lat = latqs.split('=')[1];
const lng = lngqs.split('=')[1];

명확성을 위해 별도의 메서드(utils)로 이동할 수 있습니다(저는 이를 getSearchLatLong라고 했습니다).

끝점 호출

구성 요소가 처음 마운트되면 엔드포인트를 호출하고 상태에 저장해야 합니다.
이를 위해 useEffect 및 useState를 사용하겠습니다.

const CityPage = () => {
  const location = useLocation();
  const [weatherData, setWeatherData] = useState<WeatherData>();

  useEffect(() => {
    const getWeather = async () => {
      const {lat, lng} = getSearchLatLong(location.search)

      const url = `https://api.weatherbit.io/v2.0/current?key=${API_KEY}&lat=${lat}&lon=${lng}`;
      const result = await axios.get(url);

      setWeatherData(result.data.data[0]);
    };
    if (!weatherData) getWeather();
  }, []);

  // ...
}

API는 다음과 같은 데이터를 반환합니다.

{
    "data": [
        {
            "wind_cdir": "WSW",
            "rh": 58,
            "pod": "d",
            "lon": -0.1276,
            "pres": 1017.9,
            "timezone": "Europe/London",
            // [...]
        }
    ],
    "count": 1
}

첫 번째 관찰만 저장하겠습니다(어쨌든 하나만 받아야 합니다).

날씨 표시

받은 정보를 간단한 방법으로 표시해 보겠습니다.

return (
  <Container>
    <NavBar />
    <ViewContainer>
      {weatherData ? (
        <>
          <h1>
            {weatherData.city_name}{' '}
            <img
              src={`https://www.weatherbit.io/static/img/icons/${weatherData.weather.icon}.png`}
            />
          </h1>
          <ul>
            <li>
              <Thermometer /> {weatherData.temp}° (feels like{' '}
              {weatherData.app_temp}°)
            </li>
            <li>
              <Wind /> {weatherData.wind_spd}m/s {weatherData.wind_cdir}
            </li>
          </ul>
        </>
      ) : (<div>Loading...</div>)}
    </ViewContainer>
  </Container>
)

몇 가지 참고 사항:
Thermometer 및 Wind 구성 요소는 모두 react-bootstrap-icons 의 이미지이므로 사용하려면 lib를 설치하고 원하는 구성 요소를 가져오기만 하면 됩니다.

Weatherbit은 현재 날씨에 대한 아이콘을 반환하므로 해당 이미지를 사용하겠습니다. 더 많은 정보를 찾을 수 있습니다here.



다음 튜토리얼에서는 이미 살펴본 도시에 빠르게 액세스하기 위해 로컬 스토리지에 도시를 저장합니다.