Effect 재실행 줄이기 (심화 전략)

import { useState, useEffect } from "react";
 
function UserDataFetcherBad({ userId, theme }) {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    // theme 변경 시에도 데이터를 다시 불러오게 되어 불필요한 Effect 재실행 발생
    console.log(
      `Effect 1 (잘못된 접근): 사용자 ${userId}의 데이터를 테마 ${theme}으로 불러옵니다.`
    );
    // ... (생략: API 호출 및 데이터 업데이트)
  }, [userId, theme]); // theme이 변경될 때마다 Effect 재실행
 
  return (
    // ... (생략) ...
  );
}

import { useState, useEffect } from "react";
 
function UserDataFetcherGood1WithDestructuring({ user }) {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    // user 객체 전체가 아닌 user.id 값에만 의존하여 Effect 재실행을 제어합니다.
    console.log(`Effect 2 (올바른 접근 - 객체 의존성 분해): 사용자 ID ${user.id}의 데이터를 불러옵니다.`);
    // ... (생략: API 호출 및 데이터 업데이트)
  }, [user.id]); // user 객체 중 id 값의 변경에만 반응
 
  return (
    // ... (생략) ...
  );
}

import { useState, useEffect } from "react";
 
function UserDataFetcherGood1({ userId, theme }) {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    console.log(`Effect 3 (올바른 접근 - 분리된 의존성): 사용자 ${userId}의 데이터를 불러옵니다.`);
    // ... (생략: API 호출 및 데이터 업데이트, theme은 클로저를 통해 접근)
  }, [userId]); // Effect는 userId 변경에만 반응
 
  return (
    // ... (생략) ...
  );
}

import { useState, useEffect, useRef } from "react";
 
function UserDataFetcherGood2({ userId, theme }) {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);
  const themeRef = useRef(theme); // ref에 theme 값 저장
 
  useEffect(() => {
    themeRef.current = theme; // themeRef.current가 항상 최신 theme 값을 가리키도록 Effect로 동기화
  }, [theme]);
 
  useEffect(() => {
    console.log(
      `Effect 4 (올바른 접근 - ref 활용): 사용자 ${userId}의 데이터를 불러옵니다.`
    );
    // ... (생략: API 호출 및 데이터 업데이트, theme은 ref.current를 통해 접근)
  }, [userId]); // 여전히 user.id, user.name에 의존
 
  return (
    // ... (생략) ...
  );
}

import { useState, useEffect } from 'react';
// 위에서 정의된 UserDataFetcherBad, UserDataFetcherGood1, UserDataFetcherGood2 컴포넌트를 가정합니다.
// 실제 사용 시에는 필요한 컴포넌트들을 import 해야 합니다。
 
export default function App() {
  const [currentUser, setCurrentUser] = useState({ id: 1, name: 'Alice' });
 
  useEffect(() => {
    const timer = setTimeout(() => {
      // user 객체 내부 값은 같지만, 새로운 객체 참조를 생성
      // 이 경우 UserDataFetcherBad는 재실행되지만, UserDataFetcherGood1과 UserDataFetcherGood2는 재실행되지 않습니다.
      setCurrentUser({ id: 1, name: 'Alice' });
    }, 2000);
 
    const timer2 = setTimeout(() => {
      // user 객체 내부 값이 변경됨
      setCurrentUser({ id: 2, name: 'Bob' });
    }, 4000);
 
    return () => {
      clearTimeout(timer);
      clearTimeout(timer2);
    };
  }, []);
 
  return (
    <div>
      <h1>의존성 분해 또는 useRef 활용</h1>
      <h2>4-1. 잘못된 접근</h2>
      <UserDataFetcherBad user={currentUser} />
      <hr style={{ margin: '20px 0' }} />
      <h2>4-2. 올바른 접근 1</h2>
      <UserDataFetcherGood1 user={currentUser} />
      <hr style={{ margin: '20px 0' }} />
      <h2>4-3. 올바른 접근 2</h2>
      <UserDataFetcherGood2 user={currentUser} />
    </div>
  );
}

import { useState, useEffect } from "react";
 
function createConnection(serverUrl, roomId) {
  // ... (생략)
  return {
    connect() {
      console.log(`📡 Connecting to ${serverUrl} room ${roomId}...`);
    },
    disconnect() {
      console.log(`❌ Disconnected from ${serverUrl} room ${roomId}.`);
    },
  };
}
 
function ChatRoomBad({ roomId }) {
  const [serverUrl, setServerUrl] = useState("https://localhost:1234");
 
  useEffect(() => {
    // ChatRoom 연결 관리 Effect
    console.log(
      "Effect 1 (잘못된 접근): ChatRoom 연결 생성 (roomId, serverUrl 변경 시 실행)"
    );
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
 
  return (
    // ... (생략) ...
  );
}

import { useState, useEffect } from "react";
 
function createConnection(serverUrl, roomId) {
  // ... (생략)
  return {
    connect() {
      console.log(`📡 Connecting to ${serverUrl} room ${roomId}...`);
    },
    disconnect() {
      console.log(`❌ Disconnected from ${serverUrl} room ${roomId}.`);
    },
  };
}
 
function ChatRoomGood({ roomId }) {
  const [serverUrl, setServerUrl] = useState("https://localhost:1234");
 
  useEffect(() => {
    console.log(
      "Effect 2 (올바른 접근): ChatRoom 연결 생성 (roomId, serverUrl 변경 시 실행)"
    );
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
 
  return (
    // ... (생략) ...
  );
}

import { useState } from 'react';
// 위에서 정의된 ChatRoomBad, ChatRoomGood 컴포넌트를 가정합니다.
// 실제 사용 시에는 필요한 컴포넌트들을 import 해야 합니다.
 
export default function App() {
  const [roomId, setRoomId] = useState('general');
  const [show, setShow] = useState(false);
 
  return (
    <>
      <label>
        채팅방 ID:
        <input value={roomId} onChange={e => setRoomId(e.target.value)} />
      </label>
      <button onClick={() => setShow(!show)}>{show ? '숨기기' : '보이기'}</button>
      <hr />
      {show && (
        <>
          <h2>5-1. 단일 Effect로 여러 관심사 처리 (개선 전)</h2>
          <ChatRoomBad roomId={roomId} />
          <hr style={{ margin: '20px 0' }} />
          <h2>5-2. 올바른 접근</h2>
          <ChatRoomGood roomId={roomId} />
        </>
      )}
    </>
  );
}