의존성 가볍게 - Effect 재설계로 재실행 줄이기 (기본 전략)

import { useEffect } from "react";
 
function UserProfileBad({ firstName, lastName }) {
  useEffect(() => {
    const fullName = `${firstName} ${lastName}`;
    console.log(`Effect 1 (Effect 내부에서 파생 값 계산): 사용자 이름이 업데이트되었습니다: ${fullName}`);
  }, [firstName, lastName]);
 
  return (
    // ... (생략) ...
  );
}

import { useEffect } from "react";
 
function UserProfileGood({ firstName, lastName }) {
  const fullName = `${firstName} ${lastName}`; // 렌더링 로직에서 파생 값 계산
 
  useEffect(() => {
    console.log(`Effect 2 (올바른 접근): 사용자 이름이 업데이트되었습니다: ${fullName}`);
  }, [fullName]); // fullName을 의존성으로 포함하더라도, 위에서 계산되므로 Effect 실행 조건을 명확히 합니다.
 
  return (
    // ... (생략) ...
  );
}

import { useEffect } from "react";
 
function UserProfileBetter({ firstName, lastName }) {
  useEffect(() => {
    // fullName을 의존성으로 직접 넣기보다, fullName을 구성하는 원시 값에 의존하는 것이 더 명확하고 효율적입니다.
    console.log(`Effect 3 (더 나은 올바른 접근): 사용자 이름이 업데이트되었습니다: ${firstName} ${lastName}`);
  }, [firstName, lastName]); // Effect는 firstName, lastName 변경에만 의존합니다.
 
  return (
    // ... (생략) ...
  );
}

import { useState, useEffect } from 'react';
import UserProfileBad from './codesandbox-examples/section1/UserProfileBad';
import UserProfileGood from './codesandbox-examples/section1/UserProfileGood';
import UserProfileBetter from './codesandbox-examples/section1/UserProfileBetter';
 
export default function App() {
  const [user, setUser] = useState({ firstName: '김', lastName: '리액트' });
 
  useEffect(() => {
    const timer = setTimeout(() => {
      // user 객체 내부 값은 변경되지만, 객체 참조는 동일하게 유지
      // 이 경우, UserProfileBad는 재실행되지 않음 (의존성이 원시값인 firstName, lastName이므로)
      // UserProfileGood도 재실행되지 않음 (fullName이 firstName, lastName에 의해 파생되고, App의 user state 변경이 fullName을 직접 변경하지 않음)
      // UserProfileBetter도 재실행되지 않음
      setUser({ firstName: '박', lastName: '훅스' });
    }, 2000);
    return () => clearTimeout(timer);
  }, []);
 
  return (
    <div>
      <h1>파생 값 계산으로 Effect 의존성 제거</h1>
      <h2>1-1. Effect 내부에서 파생 값 계산</h2>
      <UserProfileBad firstName={user.firstName} lastName={user.lastName} />
      <hr style={{ margin: '20px 0' }} />
      <h2>1-2. 올바른 접근</h2>
      <UserProfileGood firstName={user.firstName} lastName={user.lastName} />
      <hr style={{ margin: '20px 0' }} />
      <h2>1-3. 더 나은 올바른 접근</h2>
      <UserProfileBetter firstName={user.firstName} lastName={user.lastName} />
    </div>
  );
}

import { useState, useEffect } from 'react';
 
function BadSaveExample() {
  const [inputValue, setInputValue] = useState('');
  const [hasChanges, setHasChanges] = useState(false);
  const [triggerSave, setTriggerSave] = useState(false);
 
  useEffect(() => {
    if (triggerSave) {
      console.log('Effect 내부: 데이터 저장 로직 실행');
      setTimeout(() => {
        alert('데이터 저장 완료! (Effect 내부)');
        setHasChanges(false);
        setTriggerSave(false);
      }, 700);
    }
  }, [triggerSave]);
 
  const handleInputChange = e => {
    setInputValue(e.target.value);
    setHasChanges(true);
  };
 
  const handleSaveButtonClick = () => {
    if (hasChanges) {
      setTriggerSave(true);
    } else {
      alert('변경사항이 없습니다.');
    }
  };
 
  return (
    <div>
      <h3>이벤트 로직을 Effect로 트리거하는 잘못된 패턴</h3>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <p>변경사항: {hasChanges ? '있음' : '없음'}</p>
      <button onClick={handleSaveButtonClick} disabled={!hasChanges}>
        저장 (잘못된 Event/Effect 분리)
      </button>
    </div>
  );
}

import { useState } from 'react';
 
function GoodSaveExample() {
  const [inputValue, setInputValue] = useState('');
  const [hasChanges, setHasChanges] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
 
  const handleInputChange = e => {
    setInputValue(e.target.value);
    setHasChanges(true);
  };
 
  const handleSave = async () => {
    if (!hasChanges || isSaving) return;
 
    setIsSaving(true);
    console.log('Event Handler 내부: 데이터 저장 로직 실행');
    try {
      await new Promise(resolve => setTimeout(resolve, 700));
      alert('데이터 저장 완료! (Event Handler 내부)');
      setHasChanges(false);
    } catch (error) {
      console.error('저장 실패:', error);
      alert('데이터 저장 실패!');
    } finally {
      setIsSaving(false);
    }
  };
 
  return (
    <div>
      <h3>이벤트 핸들러 내에서 직접 Side Effect 처리하는 올바른 패턴</h3>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <p>변경사항: {hasChanges ? '있음' : '없음'}</p>
      <button onClick={handleSave} disabled={!hasChanges || isSaving}>
        {isSaving ? '저장 중...' : '저장 (올바른 Event 처리)'}
      </button>
    </div>
  );
}

import { useState } from 'react';
import BadSaveExample from './codesandbox-examples/section2/BadSaveExample';
import GoodSaveExample from './codesandbox-examples/section2/GoodSaveExample';
 
export default function App() {
  return (
    <div>
      <h1>이벤트 로직 분리를 통한 Effect 의존성 최적화</h1>
      <h2>2-1. 잘못된 접근</h2>
      <BadSaveExample />
      <hr style={{ margin: '40px 0' }} />
      <h2>2-2. 올바른 접근</h2>
      <GoodSaveExample />
    </div>
  );
}

import { useState, useEffect } from "react";
 
function ProductListBad({ category, sortBy }) {
  const [products, setProducts] = useState([]);
 
  const filters = { category, sortBy }; // 매 렌더링마다 새로운 객체 생성
 
  useEffect(() => {
    console.log(
      "Effect 1 (잘못된 접근): 제품 목록을 불러옵니다. (filters 객체 변경)",
      filters
    );
    // ... (생략: 가상의 API 호출 및 제품 목록 업데이트)
  }, [filters]); // 매 렌더링마다 새로운 filters 객체 때문에 Effect 재실행
 
  return (
    // ... (생략) ...
  );
}

import { useState, useEffect, useMemo } from "react";
 
function ProductListGood({ category, sortBy }) {
  const [products, setProducts] = useState([]);
 
  const filters = useMemo(() => ({
    category,
    sortBy,
  }), [category, sortBy]); // useMemo를 사용하여 filters 객체의 참조 동일성을 유지
 
  useEffect(() => {
    console.log(
      "Effect 2 (올바른 접근): 제품 목록을 불러옵니다. (filters 객체 안정화)",
      filters
    );
    // ... (생략: 가상의 API 호출 및 제품 목록 업데이트)
  }, [filters]); // filters가 useMemo로 안정화되었으므로 불필요한 재실행 방지
 
  return (
    // ... (생략) ...
  );
}

import { useState } from "react";
import ProductListBad from "./codesandbox-examples/section3/ProductListBad";
import ProductListGood from "./codesandbox-examples/section3/ProductListGood";
 
export default function App() {
  // ... (생략) ...
 
  return (
    // ... (생략) ...
  );
}