React에서 날씨 앱을 구축하는 방법

API 작업, 데이터 가져오기, React의 비동기 및 대기와 같은 중요한 웹 개발 기술을 익히고 싶다면 날씨 앱을 구축하는 것이 가장 좋은 방법입니다.

실시간 날씨와 일기예보를 볼 수 있어서 재미있는 프로젝트이기도 합니다.

이 튜토리얼에서는 React를 사용하여 모든 도시의 날씨와 해당 도시의 5일 일기 예보를 표시하는 완전한 기능을 갖춘 날씨 앱을 구축합니다.

내일 비가 올지 여부를 아는 것 외에도 다음 개념도 배우게 됩니다.

• 외부 API와 통신하는 방법
• React에서 데이터 가져오기 
• 비동기 작업과 비동기 및 대기의 신비

이 튜토리얼이 끝나면 다음과 같은 앱을 빌드하게 됩니다.

React 기본 사항을 익히고 싶다면 이 튜토리얼을 읽어보세요.

React 시작하기: 초보자를 위한 전체 가이드

시작해 보세요.

개발 환경

Vite는 보다 빠르고 효율적인 개발 환경을 위해 설계된 빌드 도구입니다. 매우 빠른 HMR(핫 모듈 교체) 및 롤업을 활용하여 코드를 프로덕션에 최적화된 정적 자산으로 묶는 빌드 명령과 같은 기능으로 기본 ES 모듈을 향상시키는 개발 서버가 함께 제공됩니다.

터미널에서 다음 명령을 실행하면 React-weather라는 새 애플리케이션이 생성됩니다

npm create vite@latest react-weather

다음 단계에서는 프레임워크로 Reat를 선택하고 변형으로 JavaScript를 선택합니다.

Vite가 애플리케이션을 생성한 후, React-weather 폴더로 CD를 이동하고 npm install 및 npm run 명령을 실행하세요.

 cd react-weather
 npm install
 npm run dev

이제 애플리케이션이 http://localhost:5173/

에서 실행되어야 합니다.

인터페이스 구축

app.jsx 파일에서 UI를 빌드하는 것부터 시작하고 반환된 조각의 모든 콘텐츠를 삭제합니다. 이제 app.jsx는 다음과 같습니다.

import { useState } from 'react'
import './App.css'

function App() {

  return (
    <>

    </>
  )
}

export default App

UI에는 3개의 섹션이 있습니다. 

• 머리글: 도시, 기온, 날씨 조건이 표시됩니다
• 날씨 세부정보 섹션: 이 섹션에서는 습도와 풍속이 표시됩니다
• 예보 섹션: 각 도시의 향후 5일 동안의 일기 예보를 표시합니다. 매일 기온과 기상 조건(흐림, 맑음, 흐림) 등이 표시됩니다.

return 문 내부에 래퍼 div를 추가하는 것부터 시작해 보겠습니다. 이 div 요소에는 모든 섹션이 포함됩니다.

npm create vite@latest react-weather

래퍼 내부에

온도에 대한

요소와 전체 날씨 조건에 대한 또 다른

요소를 표시합니다.

 cd react-weather
 npm install
 npm run dev

세부정보 섹션에서는 습도와 풍속을 연속적으로 표시하려고 하므로 각 항목은 해당 div 요소에 포함됩니다.

import { useState } from 'react'
import './App.css'

function App() {

  return (
    <>

    </>
  )
}

export default App

마지막으로 일기예보 섹션에는 매일 제목과 몇 가지 목록 항목이 포함됩니다. 목록 항목의 경우 우선 2일을 표시해 보겠습니다.

import { useState } from 'react'
import './App.css'

function App() {

  return (
     <div className="wrapper">

      </div>
  )
}

export default App

지금까지 우리 앱은 다음과 같습니다.

CSS를 사용한 스타일 지정

인터페이스를 아름답게 만들기 위해 스타일을 추가하고 CSS를 사용하겠습니다. main.jsx 파일에는 앱의 모든 전역 스타일을 가져오는 가져오기가 이미 있습니다

import { useState } from "react";
import "./App.css";

function App() {
  return (
    <div className="wrapper">
      <div className="header">
        <h1 className="city">London</h1>
        <p className="temperature">60°F</p>
        <p className="condition">Cloudy</p>
      </div>
    </div>
  );
}

export default App;

Flex를 활용한 바디 스타일링부터 시작해 보겠습니다.

export default App;

import { useState } from "react";
import "./App.css";

function App() {
  return (
    <div className="wrapper">
      <div className="header">
        <h1 className="city">London</h1>
        <p className="temperature">60°F</p>
        <p className="condition">Cloudy</p>
      </div>
      <div className="weather-details">
        <div>
          <p>Humidity</p>
          <p> 60%</p>
        </div>
        <div>
          <p>Wind Speed</p>
          <p>7 mph</p>
        </div>
      </div>
    </div>
  );
}

여기에서는 모든 콘텐츠가 가로 및 세로 중앙에 배치되도록 justify-items:center 및 justify-content:center를 설정했습니다.

래퍼에 다른 배경색, 최소 너비, 테두리 반경, 상자 그림자, 모든 측면에 여백을 추가해 보겠습니다.

export default App;

import { useState } from "react";
import "./App.css";

function App() {
  return (
    <div className="wrapper">
      <div className="header">
        <h1 className="city">London</h1>
        <p className="temperature">60°F</p>
        <p className="condition">Cloudy</p>
      </div>
      <div className="weather-details">
        <div>
          <p>Humidity</p>
          <p> 60%</p>
        </div>
        <div>
          <p>Wind Speed</p>
          <p>7 mph</p>
        </div>
      </div>
      <div className="forecast">
        <h2 className="forecast-header">5-Day Forecast</h2>
        <div className="forecast-days">
          <div className="forecast-day">
            <p>Monday</p>
            <p>Cloudy</p>
            <p>12°F</p>
          </div>
          <div className="forecast-day">
            <p>Monday</p>
            <p>Cloudy</p>
            <p>12°F</p>
          </div>
        </div>
      </div>
    </div>
  );
}

도시 이름과 기온 요소에 더 큰 글꼴 크기를 추가하고 굵게 표시하세요. 헤더 요소의 전체 스타일은 다음과 같습니다.

import './index.css'

날씨 세부정보 섹션의 요소(예: 습도 및 풍속)가 동일한 행에 정렬되도록 하려면 display: flex 및 justify-content: space-between;을 사용하세요. 날씨 세부정보 및 해당 요소의 스타일은 다음과 같습니다.

body {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #60a5fa, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-family: Arial, sans-serif;
}

마지막으로 일기예보 섹션에 다음 스타일을 추가합니다.

.wrapper {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 1.5rem;
  padding: 2rem;
  min-width: 400px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

이제 앱은 다음과 같습니다.

실시간 날씨 데이터 받기

지금까지는 자리 표시자 데이터를 사용하고 있으며 실시간 날씨 정보를 얻기 위해 openweather API를 사용할 것입니다. https://openweathermap.org/api로 이동하여 무료 API 키를 받으세요.

API_KEY를 정의하세요.

 

.city {
  font-size: 2.5rem;
  font-weight: bold;
}
.temperature {
  font-size: 3.5rem;
  font-weight: bold;
}

.condition {
  font-size: 1.25rem;

}

프로덕션 환경에서는 .env 파일에 API 키와 같은 민감한 데이터를 추가해야 합니다.

State를 사용하여 날씨 데이터 저장

React에서 상태는 구성 요소가 동적 데이터를 관리하고 응답할 수 있게 해주기 때문에 중요한 개념입니다. API에서 데이터를 가져올 때 구성 요소 내에서 해당 데이터를 저장하고 조작할 수 있는 방법이 필요합니다.

상태가 들어오는 곳입니다.

시간이 지남에 따라 변경될 수 있는 React 구성 요소의 모든 것은 상태에 의해 관리됩니다. 상태가 변경되면 React 구성 요소가 다시 렌더링되어 새로운 변경 사항을 반영합니다.

예를 들어 날씨 앱에서 특정 도시의 현재 날씨 정보를 가져와 해당 주에 저장하려고 합니다.

이를 위해 useState 후크를 사용하겠습니다. 이 후크의 구문은 다음과 같습니다.

npm create vite@latest react-weather

• value는 현재 상태 값입니다.
• setValue는 상태를 업데이트할 수 있는 함수입니다.
• initialValue는 상태가 시작하는 값입니다(숫자, 문자열, 객체 또는 배열일 수도 있음).

앱 기능 상단에서 날씨 데이터 상태를 정의하세요. 초기값은 null입니다

 cd react-weather
 npm install
 npm run dev

• weatherData는 날씨 세부정보를 저장합니다
• setWeather가 날씨 세부정보를 업데이트합니다.

도시의 주를 정의하고 도시 이름의 초기 주 변수를 런던으로 설정

import { useState } from 'react'
import './App.css'

function App() {

  return (
    <>

    </>
  )
}

export default App

useEffect 후크를 사용하여 데이터 가져오기

React는 기본적으로 부작용을 처리할 방법이 없습니다. 부작용은 비동기 작업, 로컬 저장소 등과 같이 Reacts 제어 외부에서 발생하는 작업입니다. c .

React 구성 요소는 마운트될 때 렌더링되므로 가져오기 요청을 완료하는 데 시간이 걸리기 때문에 이 단계에서 API 요청을 하면 아직 데이터에 액세스할 수 없습니다.

이러한 경우 React는 useEffect 후크를 사용하여 부작용을 수행합니다. useEffect 후크는 함수를 첫 번째 매개변수와 종속성 배열로 사용합니다. 구문은 다음과 같습니다.

import { useState } from 'react'
import './App.css'

function App() {

  return (
     <div className="wrapper">

      </div>
  )
}

export default App

useEffect 후크의 종속성 배열에는 효과가 실행되어야 하는 시기를 결정하는 변수가 포함되어 있습니다. 예를 들어, 우리의 경우 useEffect는 매 렌더링이 아닌 날씨 데이터가 변경될 때 실행되어야 합니다.

useEffect 내부에서 Open Weather API에서 특정 도시의 날씨를 가져오는 비동기 함수를 만듭니다. 비동기 작업이므로 함수도 비동기식이어야 합니다.

이 함수는 cityName을 매개변수로 사용합니다

import { useState } from "react";
import "./App.css";

function App() {
  return (
    <div className="wrapper">
      <div className="header">
        <h1 className="city">London</h1>
        <p className="temperature">60°F</p>
        <p className="condition">Cloudy</p>
      </div>
    </div>
  );
}

export default App;

데이터를 가져온 후에는 setWeatherData setter 함수를 사용하여 응답 데이터로 상태를 업데이트합니다. 잠재적인 오류를 처리하려면 코드를 try-catch 블록으로 래핑해야 합니다.

export default App;

import { useState } from "react";
import "./App.css";

function App() {
  return (
    <div className="wrapper">
      <div className="header">
        <h1 className="city">London</h1>
        <p className="temperature">60°F</p>
        <p className="condition">Cloudy</p>
      </div>
      <div className="weather-details">
        <div>
          <p>Humidity</p>
          <p> 60%</p>
        </div>
        <div>
          <p>Wind Speed</p>
          <p>7 mph</p>
        </div>
      </div>
    </div>
  );
}

마운트 시 데이터를 가져오려면 useEffect 내에서 날씨 데이터 가져오기 함수를 호출해야 합니다.

함수 호출 시 현재 도시의 값을 인수로 전달합니다. 이렇게 하면 앱이 처음으로 마운트될 때 도시 상태에 지정된 값에 대해 표시할 일부 데이터가 이미 있는지 확인할 수 있습니다.

export default App;

import { useState } from "react";
import "./App.css";

function App() {
  return (
    <div className="wrapper">
      <div className="header">
        <h1 className="city">London</h1>
        <p className="temperature">60°F</p>
        <p className="condition">Cloudy</p>
      </div>
      <div className="weather-details">
        <div>
          <p>Humidity</p>
          <p> 60%</p>
        </div>
        <div>
          <p>Wind Speed</p>
          <p>7 mph</p>
        </div>
      </div>
      <div className="forecast">
        <h2 className="forecast-header">5-Day Forecast</h2>
        <div className="forecast-days">
          <div className="forecast-day">
            <p>Monday</p>
            <p>Cloudy</p>
            <p>12°F</p>
          </div>
          <div className="forecast-day">
            <p>Monday</p>
            <p>Cloudy</p>
            <p>12°F</p>
          </div>
        </div>
      </div>
    </div>
  );
}

개발자 도구로 로그를 확인하면 우리가 렌더링할 때마다 여러 API 요청을 하고 있음을 알 수 있습니다.

이 작업은 매우 비용이 많이 듭니다. 렌더링할 때마다 가져오는 것을 방지하려면 useEffect에 일부 종속성을 제공해야 합니다. 이러한 종속성은 개방형 날씨 API에 대한 API 호출이 이루어지는 시기를 결정합니다.

따라서 첫 번째 마운트 시 또는 도시 값이 변경될 때만 API 호출이 이루어지도록 종속성 배열에 도시를 추가해 보겠습니다.

npm create vite@latest react-weather

데이터를 기록하면 런던시의 날씨 정보가 포함된 개체를 얻습니다.

 cd react-weather
 npm install
 npm run dev

이제 JSX를 사용하여 요소에 날씨 세부정보를 삽입해 보겠습니다.

import { useState } from 'react'
import './App.css'

function App() {

  return (
    <>

    </>
  )
}

export default App

JavaScript에서는 React 구성 요소 내의 조건부 렌더링에 조건 && 표현식이 사용됩니다.

&& 연산자는 두 가지 조건을 확인하고 두 조건이 모두 true인 경우에만 true를 반환합니다. 우리의 경우 WeatherData가 존재하면 지정된 데이터 속성이 렌더링됩니다.

weatherData가 null(또는 정의되지 않음)인 경우 요소가 렌더링되지 않으므로 null 속성에 액세스하려고 할 때 발생할 수 있는 오류가 방지됩니다.

React에서 일기예보 가져오기 및 표시

예측을 얻기 위해 이 API https://api.openweathermap.org/data/2.5/forecast?q=${CITY}&appid=${API_KEY}를 사용하여 동일한 useEffect 후크에서 또 다른 가져오기 요청을 수행합니다. &단위=제국식

먼저 예측 데이터를 저장할 예측 상태를 생성하고 초기값을 빈 배열로 초기화합니다.

import { useState } from 'react'
import './App.css'

function App() {

  return (
     <div className="wrapper">

      </div>
  )
}

export default App

fetchWeatherData 함수 내에서 위 API에 가져오기 요청을 하고, 예측 상태를 응답 데이터로 설정합니다.

import { useState } from "react";
import "./App.css";

function App() {
  return (
    <div className="wrapper">
      <div className="header">
        <h1 className="city">London</h1>
        <p className="temperature">60°F</p>
        <p className="condition">Cloudy</p>
      </div>
    </div>
  );
}

export default App;

예측 API는 일반적으로 다음 5일 동안 3시간마다 예측을 반환하여 40개의 데이터 포인트를 생성합니다. 다음은 잘린 출력입니다.

export default App;

import { useState } from "react";
import "./App.css";

function App() {
  return (
    <div className="wrapper">
      <div className="header">
        <h1 className="city">London</h1>
        <p className="temperature">60°F</p>
        <p className="condition">Cloudy</p>
      </div>
      <div className="weather-details">
        <div>
          <p>Humidity</p>
          <p> 60%</p>
        </div>
        <div>
          <p>Wind Speed</p>
          <p>7 mph</p>
        </div>
      </div>
    </div>
  );
}

dt 변수는 타임스탬프이므로 toLocaleDateString() 메서드를 사용하여 사람이 읽을 수 있는 시간으로 변환하려는 경우입니다.

export default App;

import { useState } from "react";
import "./App.css";

function App() {
  return (
    <div className="wrapper">
      <div className="header">
        <h1 className="city">London</h1>
        <p className="temperature">60°F</p>
        <p className="condition">Cloudy</p>
      </div>
      <div className="weather-details">
        <div>
          <p>Humidity</p>
          <p> 60%</p>
        </div>
        <div>
          <p>Wind Speed</p>
          <p>7 mph</p>
        </div>
      </div>
      <div className="forecast">
        <h2 className="forecast-header">5-Day Forecast</h2>
        <div className="forecast-days">
          <div className="forecast-day">
            <p>Monday</p>
            <p>Cloudy</p>
            <p>12°F</p>
          </div>
          <div className="forecast-day">
            <p>Monday</p>
            <p>Cloudy</p>
            <p>12°F</p>
          </div>
        </div>
      </div>
    </div>
  );
}

이 타임스탬프의 출력은 포화 상태입니다

그래서 40개의 예측 항목 배열에 대해 필터 기능을 사용하여 주어진 (항목, 색인) => 인덱스 % 8 === 0조건.

(항목, 색인) => index % 8 === 0: 이 조건은 "지수를 8로 나눌 수 있는 예측만 유지합니다."를 의미합니다. 예보는 3시간마다이므로 8번째 항목마다 하루에 하나의 예보를 나타냅니다(3시간 × 8 = 24시간).

예를 들어 인덱스 범위가 0~39인 경우 매 8번째 인덱스가 dailyForecast 배열에 추가됩니다. 총 5개의 날씨 데이터 인스턴스가 있습니다.

각 일기예보 데이터 포인트는 다음과 같습니다.

import './index.css'

인스턴스가 5개이므로 map() 메서드를 사용하여 매일 일기예보를 반복하고 표시하겠습니다.

다음과 같이 예측 섹션을 업데이트하세요.

body {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #60a5fa, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-family: Arial, sans-serif;
}

여기서 오류 팝업을 발생시키는 빈 배열을 반복하지 않도록 예측 배열에 데이터가 포함되어 있는지도 확인하고 있습니다.

예보 데이터를 확인한 후 예측 배열을 매핑하고 매일 다음 데이터를 주입합니다.

• 요일
• 날씨 아이콘
• 온도

이제 앱은 다음과 같습니다.

맞춤형 날씨 정보 받기

우리 앱은 좋아 보이지만 여전히 동적 데이터를 가져올 수 없습니다. 사용자가 모든 도시에 대한 정보를 얻을 수 있도록 상단에 검색 양식을 추가해 보겠습니다.

하지만 먼저 입력 필드에 대한 상태가 필요합니다. 빈 문자열을 초기값으로 하여 상태를 선언합니다.

npm create vite@latest react-weather

양식을 만들고, 입력을 searchInput 상태에 바인딩하고, 사용자가 새 도시를 입력할 때 searchInput 값을 업데이트하는 onChange 이벤트를 추가합니다.

 cd react-weather
 npm install
 npm run dev

양식 스타일은 다음과 같습니다.

import { useState } from 'react'
import './App.css'

function App() {

  return (
    <>

    </>
  )
}

export default App

양식이 제출될 때 WeatherData 함수를 호출해야 하므로 함수 정의를 useEffect 후크 외부로 이동하지만 앱이 마운트될 때 초기 도시 값에 대한 일부 데이터를 표시해야 하므로 계속 호출합니다.

import { useState } from 'react'
import './App.css'

function App() {

  return (
     <div className="wrapper">

      </div>
  )
}

export default App

양식이 제출되면 날씨 데이터 가져오기

사용자가 검색 양식으로 도시를 검색한 후에는 새 도시와 함께 fetchWeatherData를 호출하고 WeatherData 상태를 새 도시의 날씨 정보로 업데이트하는 다른 함수를 호출해야 합니다.

양식에 onSubmitevent를 추가하고 아래와 같이 함수를 참조하세요.

import { useState } from "react";
import "./App.css";

function App() {
  return (
    <div className="wrapper">
      <div className="header">
        <h1 className="city">London</h1>
        <p className="temperature">60°F</p>
        <p className="condition">Cloudy</p>
      </div>
    </div>
  );
}

export default App;

양식을 제출하면 새 도시의 날씨 정보를 가져옵니다.

export default App;

import { useState } from "react";
import "./App.css";

function App() {
  return (
    <div className="wrapper">
      <div className="header">
        <h1 className="city">London</h1>
        <p className="temperature">60°F</p>
        <p className="condition">Cloudy</p>
      </div>
      <div className="weather-details">
        <div>
          <p>Humidity</p>
          <p> 60%</p>
        </div>
        <div>
          <p>Wind Speed</p>
          <p>7 mph</p>
        </div>
      </div>
    </div>
  );
}

fetchWeatherData 함수는 이미 WeatherData 상태의 새 상태를 새 데이터로 업데이트하므로 함수만 호출하고 사용자(searchInput)로부터 새 도시의 값을 전달합니다.

오류 처리

API에서 데이터를 가져올 때 다양한 문제가 발생할 수 있습니다. 예를 들어, 우리의 경우 날씨 API가 다운되었거나 잘못된 API 키가 있거나 일일 API 한도를 모두 소진했을 수 있습니다.

이 경우 사용자에게 서버 오류가 발생하지 않도록 적절한 오류 처리 메커니즘을 추가해야 합니다.

예를 들어 앱이 처음 로드되면 예보 배열은 비어 있고 WeatherData는 null이 됩니다. 좋은 사용자 경험을 보장하기 위해 오류 및 로드 상태를 추가해 보겠습니다.

export default App;

import { useState } from "react";
import "./App.css";

function App() {
  return (
    <div className="wrapper">
      <div className="header">
        <h1 className="city">London</h1>
        <p className="temperature">60°F</p>
        <p className="condition">Cloudy</p>
      </div>
      <div className="weather-details">
        <div>
          <p>Humidity</p>
          <p> 60%</p>
        </div>
        <div>
          <p>Wind Speed</p>
          <p>7 mph</p>
        </div>
      </div>
      <div className="forecast">
        <h2 className="forecast-header">5-Day Forecast</h2>
        <div className="forecast-days">
          <div className="forecast-day">
            <p>Monday</p>
            <p>Cloudy</p>
            <p>12°F</p>
          </div>
          <div className="forecast-day">
            <p>Monday</p>
            <p>Cloudy</p>
            <p>12°F</p>
          </div>
        </div>
      </div>
    </div>
  );
}

fetchWeatherData 함수에서 가져오기 직전에 오류 및 로드의 초기 상태를 설정합니다

import './index.css'

catch 블록에서 오류 상태를 사용자에게 친숙한 메시지로 설정해 보겠습니다

body {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #60a5fa, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-family: Arial, sans-serif;
}

JavaScript에서 try catch 블록의 finally 절은 정리에 좋습니다. API 작업 결과에 관계없이 로딩 상태를 제거하고 싶습니다.

.wrapper {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 1.5rem;
  padding: 2rem;
  min-width: 400px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

오류 및 로딩 상태가 UI에 반영되도록 하려면 반환 문 바로 앞에 이 코드를 추가하세요

npm create vite@latest react-weather

오류가 발생할 경우 오류 메시지를 표시하려면 다음을 추가하세요

양식 뒤에 태그를 지정하세요.

 cd react-weather
 npm install
 npm run dev

이 조건은 오류가 발생하면 해당 상태에 저장된 오류 메시지가 표시되도록 보장합니다.

앱 로딩 상태입니다.

오류 발생 시 출력되는 내용은 다음과 같습니다.

결론

이 튜토리얼이 끝났습니다. 소스코드는 여기에서 확인하실 수 있습니다.

이 튜토리얼이 다소 어렵다면 React 기초를 복습해야 할 수도 있습니다.

무료 React 가이드를 받고 레벨을 올리세요.

즐거운 코딩하세요.

위 내용은 React에서 날씨 앱을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!