로딩 상태와 에러 처리

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

function DataFetcherWithLoading() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true); // 초기값은 true (마운트 시 바로 로딩 시작)
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    let active = true;

    const fetchData = async () => {
      try {
        setLoading(true); // 💡 요청 시작 시 로딩 상태 true
        setError(null); // 이전 에러 초기화

        const response = await fetch('http://localhost:4000/posts/1', {
          signal: controller.signal,
        }); // 예시 API
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        if (!active) return;
        setData(result);
      } catch (err) {
        if (err?.name === 'AbortError' || !active) return;
        setError(err); // 💡 에러 발생 시 에러 상태 업데이트
      } finally {
        if (active) {
          setLoading(false); // 현재 요청만 로딩 상태를 종료
        }
      }
    };

    fetchData();

    return () => {
      active = false;
      controller.abort();
    };
  }, []);

  if (loading) {
    // 💡 로딩 중일 때 사용자에게 피드백 제공
    return (
      <div style={{ textAlign: 'center', padding: '30px', fontSize: '1.2em', color: '#555' }}>
        <p>데이터를 불러오는 중입니다...</p>
        {/* 간단한 스피너 CSS 예시 */}
        <div style={{
          border: '4px solid rgba(0, 0, 0, 0.1)',
          borderTop: '4px solid #3498db',
          borderRadius: '50%',
          width: '30px',
          height: '30px',
          animation: 'spin 1s linear infinite',
          margin: '20px auto',
        }}></div>
        <style>{`
          @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
        `}</style>
      </div>
    );
  }

  if (error) {
    // 💡 에러 발생 시 에러 메시지 표시
    return (
      <div style={{ textAlign: 'center', padding: '30px', fontSize: '1.2em', color: 'red', border: '1px solid #e74c3c', borderRadius: '8px', backgroundColor: '#fdebeb' }}>
        <p>데이터 로딩 중 오류가 발생했습니다!</p>
        <p>오류 메시지: {error.message}</p>
        <button
          onClick={() => window.location.reload()}
          style={{ marginTop: '20px', padding: '10px 20px', backgroundColor: '#e74c3c', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
        >
          다시 시도
        </button>
      </div>
    );
  }

  return (
    <div style={{ maxWidth: '600px', margin: '20px auto', padding: '25px', border: '1px solid #ddd', borderRadius: '8px', boxShadow: '0 2px 5px rgba(0,0,0,0.05)', backgroundColor: '#fdfdfd' }}>
      <h2 style={{ textAlign: 'center', color: '#2c3e50', marginBottom: '20px' }}>로딩/에러 처리된 데이터</h2>
      <h3 style={{ color: '#3498db', marginBottom: '10px' }}>{data.title}</h3>
      <p>{data.body}</p>
    </div>
  );
}

export default DataFetcherWithLoading;

    const controller = new AbortController();
    let active = true;

    const fetchData = async () => {
      try {
        setLoading(true);
        setError(null); // 이전 에러 상태 초기화

        const response = await fetch('http://localhost:4000/posts/1', {
          signal: controller.signal,
        });

        // 💡 응답이 성공적인지 확인 (HTTP 상태 코드 200-299)
        if (!response.ok) {
          // 💡 성공적이지 않으면 에러를 던져 catch 블록으로 보냄
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const result = await response.json();
        if (!active) return;
        setData(result);
      } catch (err) {
        if (err?.name === 'AbortError' || !active) return;
        setError(err); // 💡 발생한 에러를 상태에 저장
      } finally {
        if (active) setLoading(false);
      }
    };

    // Effect cleanup에서는 active=false로 바꾸고 controller.abort()를 호출합니다.

  if (error) {
    return (
      <div style={{ textAlign: 'center', padding: '30px', fontSize: '1.2em', color: 'red', border: '1px solid #e74c3c', borderRadius: '8px', backgroundColor: '#fdebeb' }}>
        <p>데이터 로딩 중 오류가 발생했습니다!</p>
        <p>오류 메시지: {error.message}</p>
      </div>
    );
  }

// 매 렌더마다 fetchData 참조가 바뀌므로 Effect도 다시 실행됨
const fetchDataEveryRender = async () => { /* ... */ };
useEffect(() => {
  fetchDataEveryRender();
}, [fetchDataEveryRender]);

// 일반적인 해결: 요청 함수를 Effect 안에 정의
useEffect(() => {
  const fetchData = async () => { /* ... */ };
  fetchData();
}, []);

// 외부에서 같은 함수 참조가 필요할 때만 안정화
const stableFetchData = useCallback(async () => { /* ... */ }, []);
useEffect(() => {
  stableFetchData();
}, [stableFetchData]);

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

const IDLE_STATE = {
  key: null,
  status: 'idle',
  data: null,
  isRefreshing: false,
  error: null,
};

const useFetch = ({ requestKey, url, options }) => {
  const [request, setRequest] = useState(IDLE_STATE);
  const [retryKey, setRetryKey] = useState(0);
  const cachedResult = useRef({
    key: null,
    hasResolved: false,
    value: null,
  });
  const latestRequestId = useRef(0);

  useEffect(() => {
    if (!requestKey || !url) {
      cachedResult.current = {
        key: null,
        hasResolved: false,
        value: null,
      };
      setRequest(IDLE_STATE);
      return;
    }

    const controller = new AbortController();
    const requestId = ++latestRequestId.current;
    let active = true;
    const canCommit = () =>
      active && latestRequestId.current === requestId;

    const previous = cachedResult.current;
    const hasPreviousResult =
      previous.key === requestKey && previous.hasResolved;
    setRequest({
      key: requestKey,
      status: hasPreviousResult ? 'success' : 'loading',
      data: hasPreviousResult ? previous.value : null,
      isRefreshing: hasPreviousResult,
      error: null,
    });

    const fetchData = async () => {
      try {
        const response = await fetch(url, {
          ...options,
          signal: controller.signal,
        });
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const json = await response.json();

        if (!canCommit()) return;
        cachedResult.current = {
          key: requestKey,
          hasResolved: true,
          value: json,
        };
        setRequest((current) =>
          current.key === requestKey
            ? { ...current, status: 'success', data: json, error: null }
            : current
        );
      } catch (err) {
        if (err?.name === 'AbortError' || !canCommit()) return;
        setRequest((current) =>
          current.key === requestKey
            ? {
                ...current,
                status: current.status === 'success' ? 'success' : 'error',
                error: err,
              }
            : current
        );
      } finally {
        // 이전 요청의 finally가 새 요청의 진행 표시를 끄지 못하게 합니다.
        if (canCommit()) {
          setRequest((current) =>
            current.key === requestKey
              ? { ...current, isRefreshing: false }
              : current
          );
        }
      }
    };

    fetchData();

    return () => {
      active = false;
      controller.abort();
    };
  }, [requestKey, url, options, retryKey]);

  const retry = () => setRetryKey((key) => key + 1);
  const visibleRequest =
    request.key === requestKey
      ? request
      : {
          ...IDLE_STATE,
          key: requestKey,
          status: requestKey && url ? 'loading' : 'idle',
        };

  return {
    data: visibleRequest.data,
    status: visibleRequest.status,
    isRefreshing: visibleRequest.isRefreshing,
    error: visibleRequest.error,
    retry,
  };
};

export default useFetch;

import React from 'react';
import { useParams } from 'react-router';
import useFetch from '../hooks/useFetch'; // 커스텀 훅 임포트

function PostDetailWithHook() {
  const { postId } = useParams();
  const url = `http://localhost:4000/posts/${postId}`;
  const requestKey = `post:${postId}`;
  const { data: post, status, isRefreshing, error, retry } = useFetch({
    requestKey,
    url,
  });

  if (status === 'loading') {
    return <div style={{ textAlign: 'center', padding: '20px' }}>게시글을 불러오는 중...</div>;
  }

  if (status === 'error') {
    return (
      <div style={{ textAlign: 'center', padding: '20px', color: 'red' }}>
        오류 발생: {error.message}
        <button onClick={retry}>다시 시도</button>
      </div>
    );
  }

  if (status === 'success' && !post) {
    return (
      <div style={{ textAlign: 'center', padding: '20px' }}>
        <p>게시글을 찾을 수 없습니다.</p>
        {isRefreshing && <p>최신 내용으로 갱신 중...</p>}
        {error && <button onClick={retry}>갱신 실패 · 다시 시도</button>}
      </div>
    );
  }

  return (
    <div style={{ maxWidth: '600px', margin: '20px auto', padding: '25px', border: '1px solid #ddd', borderRadius: '8px', boxShadow: '0 2px 5px rgba(0,0,0,0.05)', backgroundColor: '#fdfdfd' }}>
      {isRefreshing && <p>최신 내용으로 갱신 중...</p>}
      {error && <button onClick={retry}>갱신 실패 · 다시 시도</button>}
      <h2 style={{ textAlign: 'center', color: '#2c3e50', marginBottom: '20px' }}>{post.title}</h2>
      <p>{post.body}</p>
    </div>
  );
}

export default PostDetailWithHook;

import React from 'react';

type Props = {
  children: React.ReactNode;
  fallback?: React.ReactNode;
};

type State = {
  hasError: boolean;
};

export default class AppErrorBoundary extends React.Component<Props, State> {
  state: State = { hasError: false };

  static getDerivedStateFromError(): State {
    return { hasError: true };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    console.error('UI render error:', error, info);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div style={{ padding: 16, border: '1px solid #f2b8b5', borderRadius: 8 }}>
          {this.props.fallback ?? <p>문제가 발생했습니다.</p>}
        </div>
      );
    }
    return this.props.children;
  }
}

import AppErrorBoundary from './components/AppErrorBoundary';
import PostDetailWithHook from './components/PostDetailWithHook';

export default function App() {
  return (
    <AppErrorBoundary fallback={<p>게시글 화면을 불러오지 못했습니다.</p>}>
      <PostDetailWithHook />
    </AppErrorBoundary>
  );
}

import React from 'react';

export default class AppErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error('UI render error:', error, info);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback ?? <p>문제가 발생했습니다.</p>;
    }
    return this.props.children;
  }
}