useEffect 심화

useEffect(() => {
  // 이펙트 콜백 함수: 부수 효과 로직
  console.log('이펙트 실행!');

  return () => {
    // 클린업 함수: 부수 효과 정리 로직
    console.log('클린업 실행!');
  };
}, [dep1, dep2, ...]); // 의존성 배열 (deps)

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

function UserFetcher() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    console.log('UserFetcher setup: 사용자 정보 로딩을 시작합니다.');
    setLoading(true);

    const fetchUser = async () => {
      try {
        // 실제 HTTP 요청 없이 지연 Promise로 고정 사용자를 표시합니다.
        await new Promise(resolve => setTimeout(resolve, 1500)); // 1.5초 지연
        const fetchedUser = { id: 1, name: '김리액트', email: '[email protected]' };
        setUser(fetchedUser);
        setError(null);
      } catch (err) {
        setError('사용자 정보를 불러오는 데 실패했습니다.');
        setUser(null);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();

    // cleanup: 정리 시점을 로그로 확인합니다.
    return () => {
      console.log('UserFetcher cleanup: 정리 시점을 확인합니다.');
      // 로그만 남깁니다. 지연 Promise 취소나 늦은 결과 무시는 하지 않습니다.
    };
  }, []); // 일반 마운트 때 setup; 개발 Strict Mode에서는 추가 점검 가능

  if (loading) return <p style={{ color: '#555' }}>사용자 정보 로딩 중...</p>;
  if (error) return <p style={{ color: 'red' }}>에러: {error}</p>;

  return (
    <div style={{ border: '1px solid #673AB7', padding: '20px', margin: '20px', borderRadius: '8px' }}>
      <h2>사용자 프로필</h2>
      {user && (
        <div>
          <p>이름: {user.name}</p>
          <p>이메일: {user.email}</p>
        </div>
      )}
    </div>
  );
}

export default UserFetcher;

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

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const [loading, setLoading] = useState(false);

  // (1) searchTerm이 변경될 때마다 이펙트 실행
  useEffect(() => {
    if (searchTerm.length < 2) { // 2글자 미만일 땐 검색하지 않음
      setSearchResults([]);
      setLoading(false);
      return;
    }

    setLoading(true);
    console.log(`"${searchTerm}" 검색 타이머를 설정했습니다.`);

    // 입력이 멈춘 뒤 고정 검색 결과를 만듭니다.
    const timer = setTimeout(() => { // 마지막 입력 뒤 0.5초 기다리는 디바운싱
      const mockResults = [
        `검색 결과: ${searchTerm} - 아이템 A`,
        `검색 결과: ${searchTerm} - 아이템 B`,
        `검색 결과: ${searchTerm} - 아이템 C`,
      ].filter(item => item.includes(searchTerm)); // 고정 문자열에 검색어가 포함되어 있습니다.

      setSearchResults(mockResults);
      setLoading(false);
      console.log(`"${searchTerm}" 검색 결과를 만들었습니다.`);
    }, 500);

    // ⭐️ (2) 클린업 함수: 이전 타이머 해제
    return () => {
      console.log(`"${searchTerm}" 이전 검색 타이머 정리.`);
      clearTimeout(timer); // 아직 실행되지 않은 타이머 콜백만 막습니다.
    };
  }, [searchTerm]); // ⭐️ searchTerm이 변경될 때마다 이펙트 재실행

  return (
    <div style={{ border: '1px solid #FFC107', padding: '20px', margin: '20px', borderRadius: '8px' }}>
      <h2>실시간 검색</h2>
      <input
        type="text"
        placeholder="검색어를 입력하세요..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        style={{ padding: '8px', fontSize: '16px', borderRadius: '5px', border: '1px solid #ddd', width: '80%', marginBottom: '15px' }}
      />
      {loading && <p>검색 중...</p>}
      {!loading && searchResults.length === 0 && searchTerm.length >= 2 && <p>일치하는 결과가 없습니다.</p>}
      {!loading && searchResults.length > 0 && (
        <ul style={{ listStyle: 'none', padding: 0 }}>
          {searchResults.map((result, index) => (
            <li key={index} style={{ padding: '5px 0', borderBottom: '1px dotted #eee' }}>{result}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default SearchComponent;

import React, { useState } from 'react';
import './App.css';
import UserFetcher from './components/UserFetcher';
import SearchComponent from './components/SearchComponent';

function App() {
  const [showUserFetcher, setShowUserFetcher] = useState(true);

  return (
    <div className="App">
      <h1>useEffect 심화 학습</h1>

      <button onClick={() => setShowUserFetcher(!showUserFetcher)} style={{ margin: '10px', padding: '10px 20px' }}>
        UserFetcher {showUserFetcher ? '숨기기' : '보이기'}
      </button>
      {showUserFetcher && <UserFetcher />} {/* 조건부 렌더링으로 마운트/언마운트 테스트 */}

      <hr />

      <SearchComponent />

    </div>
  );
}

export default App;