useEffect와 데이터 요청

useEffect(() => {
  // 부수 효과 코드
  // 이 함수는 컴포넌트가 렌더링된 후에 실행됩니다.

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

npx json-server --watch 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(() => {
    // 데이터를 가져오는 비동기 함수 정의 (async/await 사용)
    const fetchUsers = async () => {
      try {
        setLoading(true); // 요청 시작 시 로딩 상태를 true로 설정
        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 형태로 파싱
        setUsers(data || []); // json-server 목록 응답(배열) 반영
      } catch (err) {
        setError(err); // 에러 발생 시 에러 상태 업데이트
      } finally {
        setLoading(false); // 요청 완료(성공/실패 무관) 시 로딩 상태를 false로 설정
      }
    };

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

    // 클린업 함수는 필요에 따라 추가
    // 여기서는 fetch 요청을 취소하는 기능은 포함하지 않습니다. (AbortController 사용 시 필요)
    return () => {
      console.log('UserList 컴포넌트 클린업');
    };
  }, []); // 빈 의존성 배열: 컴포넌트가 마운트될 때 한 번만 실행

  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>
  );
}

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

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

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

import React, { useState, useEffect } 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);

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

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

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

        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();

    return () => {
      // 클린업: 이전 요청이 완료되기 전에 userId가 변경되면
      // 이전 요청의 응답으로 인한 상태 업데이트를 방지할 수 있습니다.
      // (실제 fetch API는 AbortController 필요)
      console.log(`UserProfileById: Clean-up for userId ${userId}`);
    };
  }, [userId]); // 🌟 userId가 변경될 때마다 useEffect 재실행

  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(() => {
    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();
        setData(json);
      } catch (err) {
        // AbortError는 요청 취소로 인한 에러이므로 특별히 처리할 수 있습니다.
        if (err.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          setError(err);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    // 클린업 함수: 컴포넌트 언마운트 또는 의존성 변경 시 실행
    return () => {
      console.log('클린업: 요청 취소 시도');
      controller.abort(); // 요청 취소!
    };
  }, []); // 빈 배열: 마운트 시 한 번만 실행

  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;