[Next.js] divdivdiv : 날씨 API 비동기 처리

다음 링크에서는 전세계의 각종 날씨 정보 API를 무료로 제공한다. 사이트에 가입하고 나서 무료 플랜을 신청하면 개인별 API 키가 생성되는데, 해당 정보로 API를 호출해 원하는 날씨 정보를 가져올 수 있다.

Current weather data - OpenWeatherMap

async & await 문법으로 API를 비동기 처리했다. JSON 형식으로 서울의 현재 온도 및 날씨 아이콘 정보를 한국어로 가져온 뒤, weather라는 상태 변수에 해당 데이터를 객체로 저장했다. 참고로 API 키는 원래 긴 문자열 형태지만, 보안 문제로 줄임 표시했다.

export const fetchData = async (setWeather: React.Dispatch<React.SetStateAction<Weather>>) => {
  try {
    const apiKey = "...";
    const seoulWeatherResponse = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=${apiKey}&lang=kr`
    );
    if (!seoulWeatherResponse.ok) {
      throw "weather fetch failed";
    }
    const data = await seoulWeatherResponse.json();
    setWeather({ icon: data.weather[0].icon, temp: data.main.temp });
  } catch (error) {
    console.error("Error fetching city data:", error);
  }
};

날씨 정보를 보여줄 Main 컴포넌트에서는 최초 렌더링 시 API를 호출하고, setWeather를 인수로 전달한다. 이를 통해 weather에 저장된 날씨 정보는 JSX 문법으로 화면에 표시한다.

"use client";

import { fetchData } from "./divdivdiv/data";

export default function Home() {
  const [weather, setWeather] = useState<Weather>({
    icon: null,
    temp: null,
  });
  
  useEffect(() => {
    fetchData(setWeather);
  }, []);
  
    // ...

  return (
    <LanguageContext.Provider value={language}>
         // ...
                {weather.icon && (
                  <div className={`${styles["button-right"]} ${styles["weather"]}`}>
                    <Image
                      src={`https://openweathermap.org/img/wn/${weather.icon}@2x.png`}
                      width={35}
                      height={35}
                      alt="Weather Icon"
                    />
                  </div>
                )}
                 <div className={`${styles["button-right"]} ${styles["temperature"]}`}>
                  {weather.temp && `${(weather.temp - 273.15).toFixed(1)}°`}
                </div>
         // ...
      </div>
    </LanguageContext.Provider>
  );
}