React에서의 날씨/대기 데이터 처리 및 상태 관리 전략: 효율적인 데이터 일관성과 사용자 경험을 위한 상태 관리 툴들의 작동 방식 분석

[Harfe0626]

프로젝트에서 날씨 및 대기 관련 API를 활용하는 과정에서,
여러 페이지에서 일관되게 날씨 데이터를 처리해야 하는 상황이 자주 발생합니다.

이러한 상황에서 비동기 데이터 처리 및 효율적인 상태 관리는 필수적입니다.

저희가 공공API 로 받아오는 날씨 데이터는 페이지 로드 시 최신 데이터를 받아와야 하기 때문에
비 동기적으로 데이터를 처리하지 않으면 사용자 경험이 저하될 수 있습니다.

페이지 간 데이터가 일관되지 않으면 사용자의 정보 파악에 혼란을 줄 수 있으며,
이는 서비스의 신뢰성에도 좋지 않은 영향을 끼칠 수 있습니다.

특히, 우리 프로젝트에서는 Kakao OAuth를 통해 사용자 인증을 관리하고 있습니다.
이 과정에서 사용자 로그인 상태 및 (일반군, 민감군과 같은) 사용자 정보 등 중요한 상태를 관리해야 합니다.

또한,다람쥐 페이지 등 로그인 상태를 필요로 하거나,
컬렉션 페이지와 같은 사용자의 데이터를 사용해야 하는 상황에서 툴 없이는 상태 관리가 더욱 복잡해지기 때문에
적절한 상태 관리 툴의 활용이 필수적입니다.

따라서, 현재 사용하고 있는, 그리고 사용할 예정인 기술들을 보다 효율적으로 관리하는 방법을 탐구하고자 합니다.

다양한 상태 관리 툴들의 특징적인 작동 방식을 심도 있게 파악함으로써,
프로젝트의 효율성을 높이고, 더 나은 데이터 관리 및 사용자 경험 개선 전략을 수립하는 데 기여할 수 있을 것입니다.

1. 프로젝트 개요

현대인의 일상에서 날씨와 대기질 정보는 중요한 역할을 합니다.

출근 준비, 운동 계획, 야외 활동 여부 등 다양한 결정에 큰 영향을 미치기 때문입니다.

이러한 정보를 더욱 손쉽고 효과적으로 제공하기 위해, 팀 프로젝트를 통해 React를 기반으로 한 웹 서비스를 개발하고 있습니다.

이 서비스는 사용자의 현재 위치를 기반으로 날씨와 대기질 데이터를 실시간으로 제공하며,

다양한 부가 기능을 통해 사용자 경험을 최적화 하고자 합니다.

이 서비스는 사용자가 Kakao OAuth를 이용해 회원가입 없이 간단하게 로그인할 수 있도록 지원하며,

사용자가 날씨와 공기질 정보에 기반한 일일 미션을 완료하면 보상으로 "도토리"를 획득하고,

이를 다람쥐 캐릭터의 레벨을 올리는 데 사용할 수 있는 등,

다람쥐 게이미피케이션 요소를 도입하여 사용자 참여도를 높일 예정입니다.

1-1. 문제 제기

날씨와 대기질 데이터는 실시간으로 빠르게 변동하며,

위치에 따라 다르기 때문에 데이터의 최신성과 정확성을 유지하는 것이 중요합니다.

이를 위해서는 아래와 같은 과제들이 존재합니다:

• 데이터 관리의 복잡성
  • 사용자의 위치가 변경될 때마다 날씨 및 대기질 데이터를 업데이트해야 하며,
    그에 따른 불필요한 API 호출을 최소화해야 합니다.
• 상태 관리의 어려움
  • 다양한 컴포넌트에서 데이터와 상태를 일관되게 관리해야 합니다.
    예를 들어, 사용자의 위치, 날씨 데이터, 대기질 데이터, 그리고 사용자의 로그인 상태 및 게임 데이터 등을 관리해야 합니다.
• 사용자 경험 최적화
  • 데이터를 가져오는 동안의 로딩 상태를 처리하고, 데이터를 시각적으로 명확하게 표현하며, 각종 기능들이 통합적으로 동작하도록 해야 합니다.

이러한 문제를 해결하기 위해, 저희 팀은 React와 Zustand를 사용한 상태 관리를 채택했습니다.

TypeScript를 통한 타입 안전성을 보장하며, Kakao OAuth와의 통합 및 게이미피케이션 요소를 추가하여 사용자 경험을 극대화하고자 합니다.

이러한 문제를 해결하기 위해 선택한 상태 관리 전략과 구체적인 구현 방법에 대해 깊이 있게 다루려 합니다.

2. 날씨/대기 데이터의 특성과 React에서의 처리

API 데이터의 특성

날씨 및 대기 정보는 실시간으로 변화하며, 사용자가 있는 지역에 따라 다양한 데이터를 요구합니다.

이 때문에 다음과 같은 주요 고려사항들이 발생합니다:

• 비동기적 데이터 패칭

  • 날씨와 대기 데이터는 API를 통해 비동기적으로 가져와야 하며, 데이터의 양과 복잡성으로 인해 불필요한 API 호출을 최소화하는 것이 중요합니다.

    비동기 처리를 적절히 관리하지 않으면 사용자 경험이 저하될 수 있습니다.

• 실시간 데이터 업데이트

  • 날씨와 대기질 정보는 빠르게 변동되기 때문에 실시간으로 데이터를 업데이트하는 기능이 필수적입니다.

    사용자에게 최신 정보를 제공하기 위해 사용자의 위치가 변경될 때마다 데이터를 새로 가져와야 합니다.

• 지역별 데이터의 다양성

  • 사용자가 선택한 위치에 따라 제공되는 날씨와 대기 데이터는 달라질 수 있습니다.

    예를 들어, 도시와 농촌의 날씨 데이터는 다른 변수에 따라 다르게 측정되어 제공될 수 있습니다.

• 데이터의 양과 복잡성

  • 날씨 및 공기질 데이터는 단순한 온도나 습도 외에도 여러 요소(풍속, 기압, 대기오염 지수 등)를 포함합니다.

    이러한 데이터는 정기적으로 갱신되며, 복잡한 데이터 구조로 인해 올바른 처리가 필요합니다.

• 데이터의 변동성

  • 날씨와 대기질 데이터는 시간에 따라 크게 변동합니다.

    따라서 데이터를 신속하고 정확하게 업데이트하여 사용자에게 최신 정보를 제공하는 것이 중요합니다.

React에서의 기본 처리 방법

날씨와 대기 데이터의 특성을 고려하여 React에서의 처리는 기본적으로 React Hooks를 사용해 이루어집니다.

1. useState Hook 사용

• useState를 사용하여 날씨와 대기질 데이터를 상태로 관리합니다.

  예를 들어, weatherData와 airQualityData라는 상태를 정의하여 API로부터 가져온 데이터를 저장합니다.

• 사용자 위치나 기타 조건이 변경될 때마다 상태를 업데이트하여 최신 정보를 유지합니다.

1. useEffect Hook 사용

• useEffect를 사용하여 컴포넌트가 처음 렌더링될 때 또는 의존성 배열(예: 위치 ID)이 변경될 때 API 호출을 트리거합니다.
• fetchWeatherData와 fetchAirQualityData와 같은 함수에서 비동기적으로 API 요청을 보내고, 응답이 돌아오면 데이터를 상태로 업데이트합니다.
• 데이터 로딩 중에는 로딩 상태(loading)를 true로 설정하여 사용자에게 로딩 메시지나 스피너를 표시하고, 데이터가 로드된 후에는 로딩 상태를 false로 전환합니다.

import React, { useState, useEffect } from 'react';

const Home = ({ selectedLocationId }) => {
    const [weatherData, setWeatherData] = useState(null);
    const [airQualityData, setAirQualityData] = useState(null);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        const fetchData = async () => {
            setLoading(true);
            try {
                const weatherResponse = await fetchWeatherData(selectedLocationId);
                setWeatherData(weatherResponse);
                const airQualityResponse = await fetchAirQualityData(selectedLocationId);
                setAirQualityData(airQualityResponse);
            } catch (error) {
                console.error("Error fetching data: ", error);
            } finally {
                setLoading(false);
            }
        };

        if (selectedLocationId) {
            fetchData();
        }
    }, [selectedLocationId]);

    return (
        <div>
            {loading ? (
                <p>Loading data...</p>
            ) : (
                <>
                    {/* 날씨와 공기질 데이터를 UI에 렌더링 */}
                </>
            )}
        </div>
    );
};

기본적인 접근 방식의 한계점

기본적인 React Hooks(useState, useEffect)를 사용한 접근 방법에는 몇 가지 한계점이 존재합니다:

• 성능 문제

  • 위치가 변경될 때마다 useEffect가 트리거되어 API 호출을 수행합니다.

    빈번한 API 호출은 성능 저하를 초래할 수 있으며, 사용자 경험에 부정적인 영향을 미칠 수 있습니다.

• 복잡한 상태 관리

  • 여러 컴포넌트에서 동일한 데이터나 상태를 필요로 하는 경우, 상태를 상위 컴포넌트로 끌어올려 props를 통해 전달해야 합니다.

    이로 인해 상태 관리가 복잡해지고 코드 가독성이 떨어집니다.

• 리렌더링 문제

  • 상태가 변경될 때마다 React 컴포넌트가 다시 렌더링됩니다.

    이 경우 불필요한 리렌더링이 발생하여 성능이 저하될 수 있습니다.

    특히, 여러 상태가 상호 의존적일 때 이 문제가 두드러집니다.

• 데이터 일관성

  • 여러 곳에서 상태를 관리할 경우 데이터의 일관성을 유지하기 어려울 수 있습니다.

    각기 다른 컴포넌트에서 데이터가 다르게 표현되거나, 사용자 인터페이스와 백엔드의 데이터가 불일치하는 상황이 발생할 수 있습니다.

이러한 문제를 해결하기 위해서는 보다 효율적인 상태 관리 전략이 필요합니다.