프론트엔드 안티패턴 (2) — 상태와 데이터 흐름: useEffect는 왜 계속 오용되는가

function OrderSummary({ items }: { items: Item[] }) {
  const [total, setTotal] = useState(0);
  const [discounted, setDiscounted] = useState(0);
  const [isEligible, setEligible] = useState(false);
 
  useEffect(() => {
    setTotal(items.reduce((s, i) => s + i.price * i.qty, 0));
  }, [items]);
 
  useEffect(() => {
    setDiscounted(total * 0.9);
  }, [total]);
 
  useEffect(() => {
    setEligible(discounted >= 50000);
  }, [discounted]);
 
  return <Summary total={total} discounted={discounted} free={isEligible} />;
}

function OrderSummary({ items }: { items: Item[] }) {
  const total = items.reduce((s, i) => s + i.price * i.qty, 0);
  const discounted = total * 0.9;
  const isEligible = discounted >= 50000;
 
  return <Summary total={total} discounted={discounted} free={isEligible} />;
}

const sortedRows = useMemo(
  () => rows.slice().sort(comparator),   // 50,000건
  [rows, comparator]
);

const [submitted, setSubmitted] = useState(false);
 
useEffect(() => {
  if (submitted) {
    toast.success('저장되었습니다');
    analytics.track('order_created');
    router.push('/orders');
  }
}, [submitted]);
 
async function handleSubmit() {
  await saveOrder(data);
  setSubmitted(true);   // 이펙트를 "발사"하기 위한 상태
}

async function handleSubmit() {
  try {
    await saveOrder(data);
    toast.success('저장되었습니다');
    analytics.track('order_created');
    router.push('/orders');
  } catch (e) {
    toast.error('저장에 실패했습니다');
  }
}

function Filter({ onChange }: { onChange: (v: FilterValue) => void }) {
  const [value, setValue] = useState<FilterValue>(initial);
 
  useEffect(() => {
    onChange(value);     // 자식 상태를 이펙트로 부모에 통보
  }, [value, onChange]);
 
  return <input value={value.q} onChange={e => setValue({ ...value, q: e.target.value })} />;
}

function Filter({ value, onChange }: { value: FilterValue; onChange: (v: FilterValue) => void }) {
  return <input value={value.q} onChange={e => onChange({ ...value, q: e.target.value })} />;
}

function Filter({ defaultValue, onChange }: FilterProps) {
  const [value, setValue] = useState(defaultValue);
 
  function update(next: FilterValue) {
    setValue(next);
    onChange(next);      // 같은 이벤트 안에서 함께 처리
  }
 
  return <input value={value.q} onChange={e => update({ ...value, q: e.target.value })} />;
}

function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<User | null>(null);
 
  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(setUser);
  }, [userId]);
  // ...
}

// 최소한의 수정
useEffect(() => {
  let ignore = false;
  fetch(`/api/users/${userId}`)
    .then(r => r.json())
    .then(data => { if (!ignore) setUser(data); });
  return () => { ignore = true; };
}, [userId]);

const { data: user, isPending, error } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => api.getUser(userId),
});

async function UserProfile({ userId }: { userId: string }) {
  const user = await api.getUser(userId);   // 경쟁 상태 자체가 존재하지 않음
  return <Profile user={user} />;
}

// 1. 브라우저 이벤트 구독
useEffect(() => {
  const onResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', onResize);
  return () => window.removeEventListener('resize', onResize);
}, []);
 
// 2. 서드파티 명령형 라이브러리
useEffect(() => {
  const map = new MapLibrary(ref.current!);
  return () => map.destroy();
}, []);
 
// 3. 타이머
useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);
 
// 4. 외부 스토어 동기화 (가능하면 useSyncExternalStore를 쓰는 게 낫다)
// 5. 문서 제목, 포커스 이동 같은 명령형 DOM 조작

function EditForm({ user }: { user: User }) {
  const [name, setName] = useState(user.name);   // 초기값으로만 쓰임
 
  // user가 바뀌어도 name은 그대로다 → 버그
}

useEffect(() => { setName(user.name); }, [user.name]);   // 동기화 이펙트

const displayName = user.nickname ?? user.name;   // 상태 아님

// 부모에서
<EditForm key={user.id} user={user} />

type Draft = { base: User; changes: Partial<User> };
// 원본과 변경분이 각자의 자리를 갖는다

// Before — Layout이 user를 3단계 내려보낸다
<Layout user={user} />
  <Sidebar user={user} />
    <UserPanel user={user} />
 
// After — 다 만들어서 넣는다. Layout은 user를 모른다
<Layout sidebar={<UserPanel user={user} />} />

// 안티패턴 — 하나에 다 넣음
<AppContext.Provider value={{ user, theme, cart, notifications, ... }}>
 
// 정상 — 변경 주기별로 분리
<ThemeContext.Provider value={theme}>            {/* 거의 안 바뀜 */}
  <UserContext.Provider value={user}>            {/* 로그인 시에만 */}
    <CartContext.Provider value={cart}>          {/* 자주 바뀜 */}

// 값은 자주 바뀌지만 디스패처는 안 바뀐다
<CartStateContext.Provider value={cart}>
  <CartDispatchContext.Provider value={dispatch}>

const count = useCart(s => s.items.length);   // 이 값이 바뀔 때만 리렌더

const [isLoading, setLoading] = useState(false);
const [isError, setError] = useState(false);
const [isSuccess, setSuccess] = useState(false);
const [isEmpty, setEmpty] = useState(false);
const [data, setData] = useState<Row[] | null>(null);

{isLoading && !isError && <Spinner />}
{!isLoading && isError && <ErrorView />}
{!isLoading && !isError && isSuccess && data && data.length > 0 && <Table rows={data} />}
{!isLoading && !isError && isSuccess && isEmpty && <Empty />}

type LoadState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'error'; error: Error }
  | { status: 'success'; data: T };
 
const [state, setState] = useState<LoadState<Row[]>>({ status: 'idle' });

switch (state.status) {
  case 'idle':    return null;
  case 'loading': return <Spinner />;
  case 'error':   return <ErrorView error={state.error} />;   // error 접근 가능
  case 'success': return state.data.length
    ? <Table rows={state.data} />                             // data 접근 가능
    : <Empty />;
}

// 빠짐없음 검사
function assertNever(x: never): never {
  throw new Error(`처리되지 않은 상태: ${JSON.stringify(x)}`);
}
// switch 끝에: default: return assertNever(state);

// 안티패턴 — 전부 string이라 서로 바꿔 넣어도 컴파일된다
function transfer(fromUserId: string, toUserId: string, orderId: string) {}
transfer(orderId, fromUserId, toUserId);   // ✅ 컴파일 통과, 런타임 재앙

// 정상 — branded type
type Brand<T, B extends string> = T & { readonly __brand: B };
type UserId = Brand<string, 'UserId'>;
type OrderId = Brand<string, 'OrderId'>;
 
const asUserId = (s: string) => s as UserId;
 
function transfer(from: UserId, to: UserId, order: OrderId) {}
transfer(orderId, fromUserId, toUserId);   // ❌ 컴파일 에러

// 안티패턴 — 자식이 부모 데이터를 받아서 판단을 대신한다
function OrderRow({ order, allOrders, currentUser, permissions, settings }) {
  const isLast = allOrders[allOrders.length - 1].id === order.id;
  const canEdit = permissions.some(p => p.resource === 'order' && p.action === 'edit')
    && (order.ownerId === currentUser.id || currentUser.role === 'admin')
    && settings.editingEnabled;
  // ...
}

// 정상 — 판단은 소유자가, 자식은 결과만 받는다
function OrderRow({ order, canEdit, isLast }: OrderRowProps) { /* ... */ }
 
// 부모에서
{orders.map((order, i) => (
  <OrderRow
    key={order.id}
    order={order}
    canEdit={canEditOrder(order, currentUser, permissions, settings)}
    isLast={i === orders.length - 1}
  />
))}

// 안티패턴 — 모달 하나의 열림 상태가 최상단에
function App() {
  const [isOrderModalOpen, setOrderModalOpen] = useState(false);
  const [isFilterOpen, setFilterOpen] = useState(false);
  const [isProfileOpen, setProfileOpen] = useState(false);
  // ... 이 상태들이 20개쯤 쌓인다
}