React Micro Projects | Sanghwan An

Sanghwan
Frontend

🌤️ Weather App

Requirements

입력 폼을 별도 컴포넌트(WeatherForm)로 분리
날씨 결과 표시를 WeatherCard 컴포넌트로 분리
에러 메시지를 WeatherError 컴포넌트로 분리
로딩 상태를 WeatherLoading 컴포넌트로 분리 (스피너/텍스트)
부모 컴포넌트(WeatherApp)가 상태(state) 및 API 로직을 관리
props 구조 분해를 통해 자식 간 데이터와 이벤트 전달
OpenWeather API (fetchByCity / fetchByCoords) 모듈화
로딩 중일 때 버튼 비활성화 및 시각적 표시

Memo

이번 컴포넌트 버전에서는 WeatherApp의 구조를 역할별로 분리했습니다.

Form, Card, Error, Loading 네 개의 컴포넌트로 나누며 props 흐름과 상태 관리 구조를 파악하려고 노력했습니다.

아직 컴포넌트 분리가 완전히 익숙하진 않지만, 조금씩 감이 오고 있습니다.