효율적인 React 4편 — Effect 없이 생각하기: 동기화와 이벤트를 구분하는 법

state 변경
 → 렌더 (옛 파생 state로)
 → 커밋 (DOM 반영)
 → 브라우저 페인트        ← 사용자가 한 프레임 동안 어긋난 화면을 봄
 → Effect 실행
 → setState
 → 다시 렌더
 → 다시 커밋
 → 다시 페인트

// ❌
useEffect(() => { setFullName(`${first} ${last}`); }, [first, last]);
// ✅
const fullName = `${first} ${last}`;

// ❌ 제출 결과를 state에 두고 Effect로 요청
const [submitted, setSubmitted] = useState<FormData | null>(null);
 
useEffect(() => {
  if (submitted) {
    fetch('/api/orders', { method: 'POST', body: submitted });
    showToast('주문 완료');
  }
}, [submitted]);
 
function handleSubmit(data: FormData) {
  setSubmitted(data);
}

// ✅ 원인이 있는 곳에서 실행
async function handleSubmit(data: FormData) {
  await fetch('/api/orders', { method: 'POST', body: data });
  showToast('주문 완료');
}

// ❌
useEffect(() => { setComment(''); }, [postId]);
// ✅
<CommentBox key={postId} />

// ❌ state 변경 → 커밋 → Effect → 부모 setState → 부모 렌더 → 자식 렌더
function Toggle({ onChange }: { onChange: (on: boolean) => void }) {
  const [on, setOn] = useState(false);
  useEffect(() => { onChange(on); }, [on, onChange]);
  return <button onClick={() => setOn(o => !o)}>{on ? 'ON' : 'OFF'}</button>;
}

// ✅ A. 같은 이벤트에서 둘 다 업데이트 → 배칭으로 렌더 한 번
function Toggle({ onChange }: { onChange: (on: boolean) => void }) {
  const [on, setOn] = useState(false);
  function toggle() {
    const next = !on;
    setOn(next);
    onChange(next);
  }
  return <button onClick={toggle}>{on ? 'ON' : 'OFF'}</button>;
}
 
// ✅ B. 부모가 상태를 소유 (제어 컴포넌트)
function Toggle({ on, onChange }: { on: boolean; onChange: (on: boolean) => void }) {
  return <button onClick={() => onChange(!on)}>{on ? 'ON' : 'OFF'}</button>;
}

// ❌ 한 번의 클릭이 렌더 4회로 이어진다
const [card, setCard] = useState<Card | null>(null);
const [goldCount, setGoldCount] = useState(0);
const [round, setRound] = useState(1);
const [isGameOver, setIsGameOver] = useState(false);
 
useEffect(() => { if (card?.gold) setGoldCount(c => c + 1); }, [card]);
useEffect(() => { if (goldCount > 3) { setRound(r => r + 1); setGoldCount(0); } }, [goldCount]);
useEffect(() => { if (round > 5) setIsGameOver(true); }, [round]);

// ✅ 한 이벤트에서 다음 상태를 한 번에 계산
type Game = { card: Card | null; goldCount: number; round: number };
 
function placeCard(game: Game, card: Card): Game {
  let { goldCount, round } = game;
  if (card.gold) goldCount += 1;
  if (goldCount > 3) { round += 1; goldCount = 0; }
  return { card, goldCount, round };
}
 
function GameBoard() {
  const [game, setGame] = useState<Game>({ card: null, goldCount: 0, round: 1 });
  const isGameOver = game.round > 5;               // 파생값
 
  function handlePlace(card: Card) {
    if (isGameOver) return;
    setGame(g => placeCard(g, card));
  }
  // ...
}

// ❌ StrictMode 개발 모드에서 두 번 실행, 컴포넌트 재마운트 시 다시 실행
useEffect(() => {
  initAnalytics();
  loadFeatureFlags();
}, []);

// ✅ 모듈 스코프: 모듈이 처음 평가될 때 한 번
if (typeof window !== 'undefined') {
  initAnalytics();
}

useEffect(() => {
  let ignore = false;
  fetchUser(userId).then(user => {
    if (!ignore) setUser(user);
  });
  return () => { ignore = true; };
}, [userId]);

// Effect 버전: 첫 렌더에 틀린 값, 이후 동기화
function useOnlineStatus() {
  const [online, setOnline] = useState(true);
  useEffect(() => {
    const update = () => setOnline(navigator.onLine);
    update();
    window.addEventListener('online', update);
    window.addEventListener('offline', update);
    return () => {
      window.removeEventListener('online', update);
      window.removeEventListener('offline', update);
    };
  }, []);
  return online;
}

// ✅ 첫 렌더부터 정확, Concurrent 렌더링에서도 일관
function subscribe(callback: () => void) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}
 
function useOnlineStatus() {
  return useSyncExternalStore(
    subscribe,
    () => navigator.onLine,
    () => true,          // 서버 렌더 시 기본값
  );
}

function LazyImage({ src }: { src: string }) {
  const [visible, setVisible] = useState(false);
 
  return (
    <div
      ref={(node) => {
        if (!node) return;
        const io = new IntersectionObserver(([entry]) => {
          if (entry.isIntersecting) { setVisible(true); io.disconnect(); }
        });
        io.observe(node);
        return () => io.disconnect();
      }}
    >
      {visible ? <img src={src} alt="" /> : <Placeholder />}
    </div>
  );
}

useEffect(() => {
  const conn = createConnection(roomId);
  conn.connect();
  return () => conn.disconnect();   // connect의 정확한 반대
}, [roomId]);

// ❌ 렌더마다 새 함수 → 매번 재실행
function createOptions() { return { serverUrl, roomId }; }
useEffect(() => { const c = createConnection(createOptions()); /* ... */ }, [createOptions]);
 
// ✅
useEffect(() => {
  const c = createConnection({ serverUrl, roomId });
  /* ... */
}, [serverUrl, roomId]);

function ChatRoom({ options }: { options: { roomId: string; serverUrl: string } }) {
  const { roomId, serverUrl } = options;           // 렌더 중 분해
  useEffect(() => { /* ... */ }, [roomId, serverUrl]);  // 부모가 인라인 객체를 넘겨도 안정
}

// ❌ messages가 바뀔 때마다 다시 연결
useEffect(() => {
  conn.on('message', (m) => setMessages([...messages, m]));
}, [messages]);
 
// ✅ messages를 읽지 않는다
useEffect(() => {
  conn.on('message', (m) => setMessages(prev => [...prev, m]));
}, []);

function ChatRoom({ roomId, theme }: { roomId: string; theme: Theme }) {
  useEffect(() => {
    const conn = createConnection(roomId);
    conn.on('connected', () => showNotification('연결됨', theme));
    conn.connect();
    return () => conn.disconnect();
  }, [roomId, theme]);   // theme을 빼면 옛 테마로 알림, 넣으면 테마 변경 시 재연결
}

import { useEffect, useEffectEvent } from 'react';
 
function ChatRoom({ roomId, theme }: { roomId: string; theme: Theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('연결됨', theme);   // 호출 시점의 최신 theme
  });
 
  useEffect(() => {
    const conn = createConnection(roomId);
    conn.on('connected', () => onConnected());
    conn.connect();
    return () => conn.disconnect();
  }, [roomId]);                           // onConnected는 의존성이 아니다
}

function Tooltip({ anchorRect, children }: Props) {
  const ref = useRef<HTMLDivElement>(null);
  const [height, setHeight] = useState(0);
 
  useLayoutEffect(() => {
    setHeight(ref.current!.getBoundingClientRect().height);
  }, []);
 
  const top = anchorRect.top - height < 0 ? anchorRect.bottom : anchorRect.top - height;
  return <div ref={ref} style={{ position: 'fixed', top }}>{children}</div>;
}

"무언가 바뀌면 X를 하고 싶다"
  ├─ X가 값을 만드는가?                       → 렌더 중 계산 (2편)
  ├─ X의 원인이 사용자 행동인가?               → 이벤트 핸들러
  ├─ props 변경 시 state 초기화인가?           → key
  ├─ 부모에게 알리는가?                        → 같은 핸들러에서 호출 / 제어 컴포넌트
  ├─ 다른 state를 연쇄로 바꾸는가?             → 핸들러에서 다음 상태를 한 번에 계산
  ├─ 앱 전체에서 한 번인가?                    → 모듈 스코프 / 진입점
  ├─ 데이터 가져오기인가?                      → 서버 컴포넌트 / 서버 캐시 (5편)
  ├─ 외부 값을 읽는 구독인가?                  → useSyncExternalStore
  ├─ DOM 노드에 붙었다 떨어지는 작업인가?       → ref 콜백
  └─ 화면이 존재하는 동안 외부 시스템과 동기화    → useEffect (+ cleanup)
       ├─ 페인트 전 측정이 필요 → useLayoutEffect
       └─ 반응하지 않을 최신 값 → useEffectEvent