useEffect와 데이터 요청

useEffect(() => {
  // 부수 효과 코드
  // 이 setup은 컴포넌트가 commit된 뒤 실행됩니다.

  return () => {
    // 클린업(Clean-up) 함수 (선택 사항)
    // 의존성이 바뀐 다음 setup 전이나 언마운트 때 실행됩니다.
    // 구독 해제, 타이머 클리어 등 정리 작업을 수행합니다.
  };
}, [dependencies]); // 의존성 배열 (선택 사항)

npx json-server --watch db.json --port 4000

{
  "users": [
    { "id": "1", "firstName": "민", "lastName": "안", "username": "min", "email": "[email protected]", "phone": "010-0000-0001", "domain": "example.test", "company": { "name": "도서관" } },
    { "id": "5", "firstName": "서", "lastName": "이", "username": "seo", "email": "[email protected]", "phone": "010-0000-0005", "company": { "name": "자료실" } }
  ],
  "posts": [
    { "id": "1", "userId": 1, "title": "첫 게시물", "body": "요청 흐름 연습" }
  ]
}

npx json-server db.json --port 4000

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

function UserList() {
  const [users, setUsers] = useState([]);        // 사용자 데이터를 저장할 상태
  const [loading, setLoading] = useState(true);  // 로딩 상태
  const [error, setError] = useState(null);      // 에러 상태

  useEffect(() => {
    let active = true; // 이 setup이 소유한 결과만 반영

    // 데이터를 가져오는 비동기 함수 정의 (async/await 사용)
    const fetchUsers = async () => {
      try {
        setLoading(true); // 요청 시작 시 로딩 상태를 true로 설정
        setError(null);
        const response = await fetch('http://localhost:4000/users');

        if (!response.ok) { // HTTP 상태 코드가 200번대가 아니면 에러 발생
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json(); // 응답을 JSON 형태로 파싱
        if (active) {
          setUsers(Array.isArray(data) ? data : []);
        }
      } catch (err) {
        if (active) {
          setError(err); // 현재 setup의 에러만 반영
        }
      } finally {
        if (active) {
          setLoading(false); // 오래된 setup이 새 loading을 끄지 못하게 함
        }
      }
    };

    fetchUsers(); // 비동기 함수 호출

    return () => {
      active = false;
    };
  }, []); // 이 setup이 읽는 반응형 값이 없음

  if (loading) {
    return <div style={{ textAlign: 'center', padding: '20px' }}>사용자 정보를 불러오는 중...</div>;
  }

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

  return (
    <div style={{ maxWidth: '800px', margin: '20px auto', padding: '20px', border: '1px solid #ddd', borderRadius: '8px', boxShadow: '0 2px 5px rgba(0,0,0,0.05)' }}>
      <h2 style={{ textAlign: 'center', color: '#2c3e50' }}>사용자 목록</h2>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {users.map(user => (
          <li
            key={user.id}
            style={{
              padding: '15px',
              marginBottom: '10px',
              border: '1px solid #eee',
              borderRadius: '5px',
              backgroundColor: '#fefefe',
              boxShadow: '0 1px 3px rgba(0,0,0,0.02)',
            }}
          >
            <strong style={{ color: '#3498db' }}>{user.firstName} {user.lastName}</strong> ({user.username})
            <br />
            <small>{user.email}</small>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

import React from 'react';
import UserList from './components/UserList'; // UserList 임포트

function App() {
  return (
    <div className="App">
      {/* ... 기존 Navbar, Routes 등 */}
      <UserList /> {/* UserList 컴포넌트 추가 */}
    </div>
  );
}

if (!Array.isArray(data)) {
  throw new Error('GET /users 응답이 배열이 아닙니다.');
}

useEffect(async () => { // 🚨 이렇게 직접 async로 만들지 마세요!
  const response = await fetch(...);
  const data = await response.json();
  // ...
}, []);

useEffect(() => {
  const fetchData = async () => { // 🌟 useEffect 내부에서 async 함수를 정의
    // ... 비동기 로직
  };

  fetchData(); // 🌟 정의된 async 함수를 즉시 호출
}, []);

import React, { useEffect, useRef, useState } from 'react';
import { useParams } from 'react-router-dom'; // React Router 사용 예시

function UserProfileById() {
  const { userId } = useParams(); // URL 파라미터에서 userId 가져옴
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const latestRequest = useRef(0);

  useEffect(() => {
    const requestId = ++latestRequest.current;
    let active = true;
    const isCurrent = () => active && requestId === latestRequest.current;

    if (!userId) { // userId가 없는 경우 (예: 초기 렌더링 시점에 파라미터가 아직 없을 때)
      setUser(null);
      setLoading(false);
      setError(new Error('사용자 ID가 제공되지 않았습니다.'));
      return () => {
        active = false;
      };
    }

    const controller = new AbortController();

    const fetchUser = async () => {
      try {
        setLoading(true);
        setError(null);
        // userId가 변경될 때마다 새로운 URL로 요청
        const response = await fetch(
          `http://localhost:4000/users/${userId}`,
          { signal: controller.signal },
        );

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        if (isCurrent()) {
          setUser(data);
        }
      } catch (err) {
        if (err.name !== 'AbortError' && isCurrent()) {
          setError(err);
        }
      } finally {
        // 오래된 요청의 finally가 새 요청의 loading을 끄지 못하게 함
        if (isCurrent()) {
          setLoading(false);
        }
      }
    };

    fetchUser();

    return () => {
      active = false;
      controller.abort();
    };
  }, [userId]); // userId가 바뀌면 이전 cleanup 뒤 새 요청 시작

  if (loading) {
    return <div style={{ textAlign: 'center', padding: '20px' }}>사용자 정보를 불러오는 중...</div>;
  }

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

  if (!user) {
    return <div style={{ textAlign: 'center', padding: '20px' }}>사용자를 찾을 수 없습니다.</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)' }}>
      <h2 style={{ textAlign: 'center', color: '#2c3e50', marginBottom: '20px' }}>{user.firstName} {user.lastName}님의 프로필</h2>
      <p><strong>아이디:</strong> {user.username}</p>
      <p><strong>이메일:</strong> {user.email}</p>
      <p><strong>전화번호:</strong> {user.phone}</p>
      <p><strong>도메인:</strong> {user.domain || '-'}</p>
      <p><strong>회사:</strong> {user.company?.name || '-'}</p>
    </div>
  );
}

export default UserProfileById;

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import UserProfileById from './components/UserProfileById'; // 새 컴포넌트 임포트
// ... 다른 임포트

function App() {
  return (
    <BrowserRouter>
      {/* ... Navbar 등 */}
      <div className="main-content">
        <Routes>
          {/* ... 다른 라우트들 */}
          {/* 동적 라우트 설정 */}
          <Route path="/users/:userId" element={<UserProfileById />} />
          {/* ... 404 라우트 */}
        </Routes>
      </div>
    </BrowserRouter>
  );
}

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

function CancellableFetch() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let active = true;
    const controller = new AbortController(); // AbortController 인스턴스 생성
    const signal = controller.signal; // 신호 가져오기

    const fetchData = async () => {
      try {
        setLoading(true);
        setError(null);
        const response = await fetch('http://localhost:4000/posts/1', { signal }); // fetch 옵션에 signal 전달

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const json = await response.json();
        if (active) {
          setData(json);
        }
      } catch (err) {
        // AbortError는 사용자에게 보여줄 요청 실패가 아닙니다.
        if (err.name !== 'AbortError' && active) {
          setError(err);
        }
      } finally {
        if (active) {
          setLoading(false);
        }
      }
    };

    fetchData();

    // 클린업 함수: 컴포넌트 언마운트 또는 의존성 변경 시 실행
    return () => {
      active = false;     // 모든 후속 상태 쓰기 차단
      controller.abort(); // fetch 자원 중단 시도
    };
  }, []); // 이 setup이 읽는 반응형 값이 없음

  if (loading) return <div style={{ textAlign: 'center', padding: '20px' }}>데이터 로딩 중...</div>;
  if (error) return <div style={{ textAlign: 'center', padding: '20px', color: 'red' }}>에러: {error.message}</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)' }}>
      <h2 style={{ textAlign: 'center', color: '#2c3e50', marginBottom: '20px' }}>게시글 상세</h2>
      <h3 style={{ color: '#3498db', marginBottom: '10px' }}>{data.title}</h3>
      <p>{data.body}</p>
      <p style={{ marginTop: '15px', fontSize: '0.9em', color: '#777' }}>
        (이 컴포넌트는 `AbortController`를 사용하여 마운트 해제 시 fetch 요청을 취소합니다.)
      </p>
    </div>
  );
}

export default CancellableFetch;