59일차[날씨 API with React]

진하의 메모장·2025년 4월 1일

API React async await geolocation 복습 자바스크립트

공부일기

목록 보기

61/66

2025 / 04 / 01

오늘 수업 시간에는 React에서 날씨 API를 사용하는 실습을 하였습니다.
자바스크립트 배울 당시에 했던 내용이었는데 그래도 아직 헷갈리는 부분이 있었습니다.
작성한 코드를 바탕으로 최대한 이해하기 쉽게 벨로그를 작성해보겠습니다.

💌 날씨 API 가져오기

React로 OpenWeatherMap API를 사용해 현재 날씨 정보를 가져오는 코드입니다.

컴포넌트 별로 코드 흐름을 세세하게 정리해보도록 하겠습니다.

💌 App.jsx

App 컴포넌트

메인 컴포넌트로, 사용자의 위치를 기반으로 날씨 정보를 가져오는 역할을 합니다.

1. import 부분

useEffect, useState는 React에서 상태 관리와 사이드 이펙트를 처리하는 주요 훅입니다.
import { useEffect, useState } from "react";
import "./App.css";
import Weather from "./weather";

useState

컴포넌트의 상태(state)를 관리할 때 사용합니다.

useEffect

컴포넌트가 렌더링된 후 특정 작업을 실행할 때 사용합니다.
주로 데이터 fetching, 구독 설정 등을 처리합니다.

2. useState

컴포넌트에 있는 값들의 상태를 관리합니다.

const [latitude, setLatitude] = useState(null);
const [longitude, setLongitude] = useState(null);
const [weather, setWeather] = useState(null);

latitude, longitude

사용자의 위치(위도, 경도)를 저장합니다.

weather

날씨 데이터를 저장합니다.

3. 사용자 위치 받아오기

사용자의 위도와 경도 위치를 받아올 수 있습니다.

useEffect(() => {
   const getLocation = () => {
      navigator.geolocation.getCurrentPosition(
         (position) => {
            const crd = position.coords;
            console.log("현재 위치는?");
            console.log(`Latitude : ${crd.latitude}`);
            console.log(`Longitude: ${crd.longitude}`);

            setLatitude(crd.latitude);
            setLongitude(crd.longitude);
         },
         (error) => {
            console.log(error);
         }
      );
   };

   getLocation();
}, []);

navigator.geolocation.getCurrentPosition

이 API는 사용자의 현재 위치를 얻는 방법입니다.
위치 정보가 성공적으로 반환되면, 위도(latitude)와 경도(longitude)를 상태로 저장합니다.

useEffect

빈 배열을 두 번째 인수로 주었기 때문에, 컴포넌트가 마운트될 때 한 번만 실행됩니다.

4. 날씨 데이터 받아오기

받아온 위치 값을 기준으로 해당 위치의 날씨 데이터를 받아올 수 있습니다.

useEffect(() => {
   const fetchWeather = async () => {
      if (latitude && longitude) {
         const url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${your_API_key}&units=metric`;

         try {
            const response = await fetch(url);
            if (!response.ok) {
               throw new Error(`HTTP error! status: ${response.status}`);
            }
            const data = await response.json();

            console.log(data);
            setWeather(data);
         } catch (error) {
            console.log(error);
         }
      }
   };

   if (latitude && longitude) {
      fetchWeather();
   }
}, [latitude, longitude]);

fetchWeather

latitude와 longitude가 변경되면 날씨 정보를 API로부터 비동기적으로 가져옵니다.

fetch

fetch 함수는 주어진 URL에서 데이터를 가져옵니다.

날씨 정보를 가져올 때 OpenWeatherMap API를 사용합니다.
appid라는 API 키를 사용하여 인증을 받는 것입니다.
API 키는 각자의 키를 사용해야 합니다.
${your_API_key} 부분을 각자의 Api키로 바꿔서 사용하세요.
날씨 정보가 성공적으로 로드되면, 그 정보를 weather 상태에 저장합니다.
units=metric을 설정하여 온도를 섭씨로 받습니다.

5. 화면 로드 표시

위치가 아직 받아지지 않았다면 로딩중 메시지를 표시합니다.

위치 정보가 있으면 Weather 컴포넌트를 렌더링하여 날씨 데이터를 전달합니다.
if (latitude === null || longitude === null) {
   return <p>로딩중..</p>;
}

return <Weather weather={weather} />;

💌 Weather.jsx

Weather 컴포넌트

weather 데이터를 props로 받아와서 화면에 표시합니다.

export default function Weather({ weather }) {
   return (
      <Container>
         {weather && (
            <Innerbox>
               <h3>지금 날씨는?</h3>
               <img
                  src={`http://openweathermap.org/img/wn/${weather.weather[0].icon}.png`}
                  alt={weather.weather[0].description}
               />
               <Infobox>
                  <p>온도 : {weather.main.temp.toFixed(0)} °C</p>
                  <p>날씨 : {weather.weather[0].description}</p>
                  <p>위치 : {weather.name}</p>
               </Infobox>
            </Innerbox>
         )}
      </Container>
   );
}

weather.weather[0].icon

OpenWeatherMap에서 제공하는 날씨 아이콘을 표시합니다.

weather.main.temp.toFixed(0)

온도를 소수점 없이 정수로 표시합니다.

1. Container

Container부분 styled-components

날씨 정보를 담을 큰 박스의 스타일을 정의한 것입니다.
const Container = styled.div`
   border: solid 1px black;
   border-radius: 40px;
   padding: 10px;
   text-align: center;
   background-color: rgb(115, 167, 184);
   margin: 0 auto;
   margin-top: 50px;
   width: 400px;
`;

2. Innerbox

Innerbox부분 styled-components

날씨 정보를 감싸는 박스입니다.
온도, 날씨 설명, 위치 등의 정보를 표시합니다.

const Innerbox = styled.div`
   border-radius: 30px;
   margin: 10px;
   padding: 30px;
   text-align: center;
   background-color: rgb(255, 255, 255);
   box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2);
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: 10px;
`;

3. Infobox

Infobox부분 styled-components

개별 날씨 정보들(온도, 설명, 위치)을 담은 박스입니다.

const Infobox = styled.div`
   border-radius: 20px;
   padding: 20px;
   text-align: center;
   margin: 0 auto;
   width: 100%;
   transition: transform 0.3s ease, background-color 0.3s ease;

   &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      background-color: white;
   }

   & p {
      margin: 5px;
   }
`;

&:hover

사용자가 마우스를 올리면 애니메이션 효과가 생깁니다.

59일차 후기

API 데이터를 가져와 해당 데이터를 화면에 출력하는 것은 익숙해진 것 같습니다.

근데 이 API만 여러 번 사용해봐서.. 이것만 익숙해진거 같기도 합니다.

styled-components도 계속 사용하니까 어색한 부분은 없어진 것 같습니다.

useEffect 사용하는 것도 이해하고 사용하는건지, 그냥 다른 코드 참고하면서 작성해서 괜찮은건지 모르겠어서 프로젝트에서 계속 사용해보면서 확인해야할 것 같습니다.

API 사용을 위해 데이터를 받아오는 fetch의 복습이 필요할 것 같습니다. (˶ᐢ. .ᐢ˵)