React 심화 — Hooks 동작 원리, 상태 관리, 성능 최적화

Hook 1 (useState) → Hook 2 (useEffect) → Hook 3 (useMemo) → null

// 절대 이렇게 하면 안 된다
function BadComponent({ isLoggedIn }) {
  const [name, setName] = useState('');

  if (isLoggedIn) {
    useEffect(() => {
      fetchProfile();
    }, []);
  }

  const [count, setCount] = useState(0);
  // ...
}

// 올바른 방법 — Hook은 항상 호출하되, 내부에서 분기
function GoodComponent({ isLoggedIn }) {
  const [name, setName] = useState('');

  useEffect(() => {
    if (isLoggedIn) {
      fetchProfile();
    }
  }, [isLoggedIn]);

  const [count, setCount] = useState(0);
}

const [count, setCount] = useState(0);

function handleClick() {
  setCount(c => c + 1);    // 리렌더링 안 함
  setFlag(f => !f);         // 리렌더링 안 함
  setName('React');          // 여기까지 모아서 한 번만 리렌더링
}

import { flushSync } from 'react-dom';

function handleClick() {
  flushSync(() => {
    setCount(c => c + 1);
  });
  // 여기서 이미 DOM 업데이트 완료
  flushSync(() => {
    setFlag(f => !f);
  });
}

// 잘못된 예 — 같은 값을 세 번 set하는 셈
function handleTripleClick() {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
  // count가 0이었으면, 결과는 1 (3 아님)
}

// 올바른 예 — 이전 상태를 받아서 계산
function handleTripleClick() {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  // count가 0이었으면, 결과는 3
}

useEffect(() => {
  // Side effect 로직
  const subscription = someAPI.subscribe(data);

  return () => {
    // Cleanup 함수
    subscription.unsubscribe();
  };
}, [dependency1, dependency2]);

// 1. 매 렌더링마다 실행
useEffect(() => { /* ... */ });

// 2. 마운트 시 한 번만 실행
useEffect(() => { /* ... */ }, []);

// 3. 특정 값이 변경될 때 실행
useEffect(() => { /* ... */ }, [userId, page]);

useEffect(() => {
  console.log('effect 실행: ', count);

  return () => {
    console.log('cleanup 실행: ', count);
  };
}, [count]);

effect 실행: 0
cleanup 실행: 0     ← 이전 effect의 cleanup이 먼저
effect 실행: 1
cleanup 실행: 1
effect 실행: 2

렌더링 → DOM 업데이트 → useLayoutEffect → 브라우저 paint → useEffect

function Tooltip({ text, targetRef }) {
  const [position, setPosition] = useState({ top: 0, left: 0 });

  // useLayoutEffect를 쓰는 대표적인 케이스
  // DOM 측정 후 위치를 잡아야 깜빡임 없이 표시됨
  useLayoutEffect(() => {
    const rect = targetRef.current.getBoundingClientRect();
    setPosition({
      top: rect.bottom + 8,
      left: rect.left,
    });
  }, [targetRef]);

  return (
    <div style={{ position: 'absolute', ...position }}>
      {text}
    </div>
  );
}

function TextInput() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleFocus}>포커스</button>
    </>
  );
}

function Timer() {
  const intervalRef = useRef(null);
  const [seconds, setSeconds] = useState(0);

  const start = () => {
    if (intervalRef.current !== null) return;
    intervalRef.current = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
  };

  const stop = () => {
    clearInterval(intervalRef.current);
    intervalRef.current = null;
  };

  useEffect(() => {
    return () => clearInterval(intervalRef.current);
  }, []);

  return (
    <div>
      <p>{seconds}초</p>
      <button onClick={start}>시작</button>
      <button onClick={stop}>정지</button>
    </div>
  );
}

function usePrevious(value) {
  const ref = useRef();

  useEffect(() => {
    ref.current = value;
  });

  return ref.current;
}

function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);

  return (
    <p>
      현재: {count}, 이전: {prevCount}
    </p>
  );
}

// useMemo — 값을 메모이제이션
const sortedList = useMemo(() => {
  return items.sort((a, b) => a.price - b.price);
}, [items]);

// useCallback — 함수를 메모이제이션
const handleClick = useCallback((id) => {
  setSelected(id);
}, []);

// 이건 과하다 — useMemo의 비교 비용이 오히려 더 클 수 있음
const greeting = useMemo(() => `안녕 ${name}`, [name]);

// 이건 의미가 있다 — 자식 컴포넌트의 불필요한 리렌더링 방지
const MemoizedChild = React.memo(ChildComponent);

const handleSubmit = useCallback(() => {
  submitForm(formData);
}, [formData]);

return <MemoizedChild onSubmit={handleSubmit} />;

const initialState = {
  status: 'idle',      // 'idle' | 'loading' | 'success' | 'error'
  data: null,
  error: null,
};

function fetchReducer(state, action) {
  switch (action.type) {
    case 'FETCH_START':
      return { ...state, status: 'loading', error: null };
    case 'FETCH_SUCCESS':
      return { status: 'success', data: action.payload, error: null };
    case 'FETCH_ERROR':
      return { status: 'error', data: null, error: action.payload };
    case 'RESET':
      return initialState;
    default:
      throw new Error(`알 수 없는 액션: ${action.type}`);
  }
}

function UserProfile({ userId }) {
  const [state, dispatch] = useReducer(fetchReducer, initialState);

  useEffect(() => {
    dispatch({ type: 'FETCH_START' });

    fetchUser(userId)
      .then(data => dispatch({ type: 'FETCH_SUCCESS', payload: data }))
      .catch(err => dispatch({ type: 'FETCH_ERROR', payload: err.message }));
  }, [userId]);

  if (state.status === 'loading') return <Spinner />;
  if (state.status === 'error') return <Error message={state.error} />;
  if (state.status === 'success') return <Profile data={state.data} />;

  return null;
}

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    setLoading(true);
    setError(null);

    fetch(url, { signal: controller.signal })
      .then(res => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then(setData)
      .catch(err => {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      })
      .finally(() => setLoading(false));

    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

// 사용
function UserList() {
  const { data: users, loading, error } = useFetch('/api/users');

  if (loading) return <Spinner />;
  if (error) return <p>에러: {error}</p>;

  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

function useDebounce(value, delay = 300) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

// 검색에 적용
function SearchInput() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 500);

  useEffect(() => {
    if (debouncedQuery) {
      searchAPI(debouncedQuery);
    }
  }, [debouncedQuery]);

  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const setValue = useCallback((value) => {
    const valueToStore = value instanceof Function ? value(storedValue) : value;
    setStoredValue(valueToStore);
    localStorage.setItem(key, JSON.stringify(valueToStore));
  }, [key, storedValue]);

  return [storedValue, setValue];
}

const AppContext = React.createContext();

function AppProvider({ children }) {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');
  const [notifications, setNotifications] = useState([]);

  return (
    <AppContext.Provider value={{ user, theme, notifications, setUser, setTheme, setNotifications }}>
      {children}
    </AppContext.Provider>
  );
}

// Provider 지옥
<AuthProvider>
  <ThemeProvider>
    <NotificationProvider>
      <CartProvider>
        <App />
      </CartProvider>
    </NotificationProvider>
  </ThemeProvider>
</AuthProvider>

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  reset: () => set({ count: 0 }),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>{count}</button>;
}

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);
const doubleAtom = atom((get) => get(countAtom) * 2); // 파생 atom

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const [doubled] = useAtom(doubleAtom);

  return (
    <div>
      <p>{count} x 2 = {doubled}</p>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </div>
  );
}

const ExpensiveList = React.memo(function ExpensiveList({ items, onSelect }) {
  console.log('ExpensiveList 렌더링');
  return (
    <ul>
      {items.map(item => (
        <li key={item.id} onClick={() => onSelect(item.id)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
});

function Parent() {
  const [count, setCount] = useState(0);

  // 이러면 React.memo가 무력화됨 — 매 렌더링마다 새 함수 생성
  const handleSelect = (id) => console.log(id);

  // 이러면 React.memo가 무력화됨 — 매 렌더링마다 새 배열 생성
  const items = data.filter(d => d.active);

  return (
    <ExpensiveList items={items} onSelect={handleSelect} />
  );
}

function Parent() {
  const [count, setCount] = useState(0);

  const handleSelect = useCallback((id) => {
    console.log(id);
  }, []);

  const items = useMemo(() => {
    return data.filter(d => d.active);
  }, [data]);

  return (
    <ExpensiveList items={items} onSelect={handleSelect} />
  );
}

// 나쁜 구조 — 마우스 위치가 바뀔 때마다 HeavyComponent도 리렌더링
function Page() {
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handler = (e) => setMousePos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);

  return (
    <div>
      <p>마우스: {mousePos.x}, {mousePos.y}</p>
      <HeavyComponent />
    </div>
  );
}

// 좋은 구조 — 마우스 추적을 별도 컴포넌트로 분리
function MouseTracker() {
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handler = (e) => setMousePos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);

  return <p>마우스: {mousePos.x}, {mousePos.y}</p>;
}

function Page() {
  return (
    <div>
      <MouseTracker />
      <HeavyComponent />
    </div>
  );
}

function ScrollTracker({ children }) {
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handler = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handler);
    return () => window.removeEventListener('scroll', handler);
  }, []);

  return (
    <div>
      <header style={{ opacity: scrollY > 100 ? 0.5 : 1 }}>헤더</header>
      {children}
    </div>
  );
}

// children은 부모에서 이미 생성된 엘리먼트이므로
// ScrollTracker가 리렌더링돼도 children은 다시 생성되지 않는다
function App() {
  return (
    <ScrollTracker>
      <HeavyContent />
    </ScrollTracker>
  );
}

import { Profiler } from 'react';

function onRenderCallback(
  id,           // Profiler 트리의 id
  phase,        // "mount" | "update"
  actualDuration, // 렌더링에 걸린 시간 (ms)
  baseDuration,   // 메모이제이션 없이 걸리는 예상 시간
  startTime,
  commitTime
) {
  if (actualDuration > 16) { // 60fps 기준 한 프레임 16ms
    console.warn(`느린 렌더링: ${id} — ${actualDuration.toFixed(2)}ms`);
  }
}

function App() {
  return (
    <Profiler id="UserList" onRender={onRenderCallback}>
      <UserList />
    </Profiler>
  );
}

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));
const Settings = lazy(() => import('./Settings'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

class ErrorBoundary extends React.Component {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // 에러 리포팅 서비스로 전송
    logErrorToService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2>문제가 발생했습니다</h2>
          <button onClick={() => this.setState({ hasError: false, error: null })}>
            다시 시도
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

// 사용
<ErrorBoundary>
  <UserProfile />
</ErrorBoundary>

// ServerComponent.jsx — 기본값이 Server Component
async function UserList() {
  // 서버에서 직접 DB 쿼리 가능
  const users = await db.query('SELECT * FROM users');

  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

// ClientComponent.jsx — 'use client' 지시어 필요
'use client';

import { useState } from 'react';

function LikeButton() {
  const [liked, setLiked] = useState(false);

  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? '좋아요 취소' : '좋아요'}
    </button>
  );
}