Axios 게시판 조회·추가·삭제

npm create vite@latest axios-data-fetching-app -- --template react
cd axios-data-fetching-app
npm install axios react-router-dom@7
npm install --save-dev json-server

{
  "posts": [
    { "id": "1", "userId": 1, "title": "첫 게시물", "body": "Axios 실습 데이터" }
  ]
}

{
  "scripts": {
    "dev": "vite",
    "api": "json-server db.json --port 4000"
  }
}

npm run api

npm run dev

/* src/index.css (이전 장과 동일) */
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f7f6;
  color: #333;
  line-height: 1.6;
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex-grow: 1;
  padding: 20px;
  max-width: 960px;
  margin: 20px auto;
  background-color: var(--background-color-main, #ffffff);
  color: var(--text-color-main, #333);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3 {
  color: var(--header-color, #2c3e50);
}

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font-size: 1em;
  transition: background-color 0.2s ease;
  margin-right: 10px; /* 추가 */
}

.button:hover {
  background-color: #2980b9;
}

.button.secondary {
  background-color: #7f8c8d;
}
.button.secondary:hover {
  background-color: #616e78;
}

/* 새로운 버튼 스타일 추가 */
.button.danger {
  background-color: #e74c3c;
}
.button.danger:hover {
  background-color: #c0392b;
}
.button.success {
  background-color: #2ecc71;
}
.button.success:hover {
  background-color: #27ae60;
}

/* 기본 light 테마 변수 정의 (CSS 변수 활용) */
:root {
  --background-color-main: #ffffff;
  --text-color-main: #333;
  --header-color: #2c3e50;
  --header-bg: #eee;
  --header-text: #333;
  --card-bg: #fdfdfd;
  --card-border: #eee;
}

body.dark-theme {
  --background-color-main: #333;
  --text-color-main: #eee;
  --header-color: #eee;
  --header-bg: #222;
  --header-text: #eee;
  --card-bg: #444;
  --card-border: #555;
}

/* 로딩 스피너 CSS (LoadingSpinner.jsx에 포함될 예정이지만, 여기서도 정의) */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

import axios from 'axios';

const mockApi = axios.create({
  baseURL: 'http://localhost:4000', // 로컬 mock 서버 기본 URL
  timeout: 10000, // 10초 타임아웃
});

export default mockApi;

import { useState, useEffect, useCallback, useRef } from 'react';
import mockApi from '../api/mockApi';

/**
 * 이 실습의 GET 조회 요청을 위한 커스텀 훅
 * @param {string | null} url - 응답 정체성을 나타내는 안정적인 요청 key
 * @param {boolean} immediate - URL이 준비되면 즉시 요청할지 여부
 * @returns {{ data, loading, error, fetchData }}
 */
const useAxios = (url, immediate = true) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [activeKey, setActiveKey] = useState(null);
  const latestRequestId = useRef(0);
  const controllerRef = useRef(null);

  // effect와 재시도 버튼이 함께 사용하는 GET 요청 함수
  const fetchData = useCallback(async () => {
    if (!url) return null;

    controllerRef.current?.abort();
    const controller = new AbortController();
    const requestId = ++latestRequestId.current;
    controllerRef.current = controller;

    setActiveKey(url);
    setLoading(true);
    setError(null);

    try {
      const response = await mockApi.get(url, { signal: controller.signal });
      if (requestId === latestRequestId.current) {
        setData(response.data);
      }
      return response.data;
    } catch (requestError) {
      if (
        requestId === latestRequestId.current &&
        requestError.code !== 'ERR_CANCELED'
      ) {
        setError(requestError);
      }
      throw requestError;
    } finally {
      if (requestId === latestRequestId.current) {
        setLoading(false);
      }
      if (controllerRef.current === controller) {
        controllerRef.current = null;
      }
    }
  }, [url]);

  useEffect(() => {
    // URL이 바뀌면 이전 엔터티를 숨기고 이전 요청의 상태 쓰기를 무효화한다.
    controllerRef.current?.abort();
    latestRequestId.current += 1;
    setData(null);
    setError(null);

    if (url && immediate) {
      // effect는 promise rejection을 소비하고, UI 오류 상태는 fetchData가 기록한다.
      void fetchData().catch(() => {});
    } else {
      setLoading(false);
    }

    return () => {
      controllerRef.current?.abort();
      latestRequestId.current += 1;
    };
  }, [url, immediate, fetchData]);

  const keyMatches = activeKey === url;

  return {
    data: keyMatches ? data : null,
    loading: keyMatches ? loading : Boolean(url && immediate),
    error: keyMatches ? error : null,
    fetchData,
  };
};

export default useAxios;

function LoadingSpinner() {
  return (
    <div style={{ textAlign: 'center', padding: '30px', fontSize: '1.2em', color: '#555' }}>
      <p>데이터를 불러오는 중입니다...</p>
      <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>
    </div>
  );
}

export default LoadingSpinner;

function ErrorDisplay({ error, onRetry }) {
  if (!error) return null;

  const handleRetry = async () => {
    try {
      await onRetry?.();
    } catch {
      // 요청 훅이 error 상태를 갱신하므로 이벤트 handler에서는 rejection을 소비합니다.
    }
  };

  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>
      {onRetry && (
        <button
          onClick={handleRetry}
          className="button danger"
          style={{ marginTop: '20px' }}
        >
          다시 시도
        </button>
      )}
    </div>
  );
}

export default ErrorDisplay;