토스트 컴포넌트 만들기

토스트는 동시에 여러 개가 쌓일 수 있어 배열 상태가 자연스럽다. useState 로 펼치면 ADD/REMOVE 로직이 컴포넌트마다 흩어지므로 useReducer 로 모은다. 호출부는 useToast() 훅이 주는 showToast(message) 만 알면 된다.

type Action =
  | { type: 'ADD'; toast: Toast }
  | { type: 'REMOVE'; id: string };

function reducer(state: Toast[], action: Action): Toast[] {
  switch (action.type) {
    case 'ADD': return [...state, action.toast];
    case 'REMOVE': return state.filter(t => t.id !== action.id);
  }
}

const ToastContext = createContext<Ctx | null>(null);
export const useToast = () => useContext(ToastContext)!;

토스트를 부모 트리 안에 그대로 렌더하면 부모의 overflow:hidden, transform, z-index 스태킹 컨텍스트에 갇힌다. ReactDOM.createPortal 은 React 트리에서는 자식이지만 DOM 상은 document.body 직속으로 빠져 레이어 문제를 구조적으로 해결한다.

import { createPortal } from 'react-dom';

function ToastList({ toasts }: { toasts: Toast[] }) {
  return createPortal(
    <ul className="toast-container" role="status" aria-live="polite">
      {toasts.map(t => <ToastItem key={t.id} {...t} />)}
    </ul>,
    document.body,
  );
}

자동 제거는 setTimeout 으로 하되, 반드시 useEffect cleanup 에서 clearTimeout 해야 한다. 빠른 언마운트나 수동 닫기 후에도 타이머가 살아 있으면 unmounted 컴포넌트에 dispatch 가 날아가 경고/메모리 누수가 난다.

useEffect(() => {
  const id = setTimeout(() => {
    dispatch({ type: 'REMOVE', id: toast.id });
  }, toast.duration ?? 3000);
  return () => clearTimeout(id);
}, [toast.id]);

의존성 배열에 toast.id 만 두어 같은 토스트가 재시작되지 않도록 하는 것도 중요 포인트다.

시각적으로만 뜨고 스크린 리더에 읽히지 않으면 에러 메시지를 놓친다. 컨테이너에 role="status" 또는 role="alert" 를 주고 성격에 맞는 aria-live 값을 쓴다.

role="alert" 은 암묵적으로 assertive, role="status" 는 polite 다. 중요도 낮은 성공 토스트에 assertive 를 남발하면 오히려 사용자 경험을 깬다.

[감점 답변] "DOM 위에 띄우려고", "관습적으로" 수준. [좋은 답변] overflow:hidden, transform, filter 같은 속성이 만드는 새 스태킹 컨텍스트때문에 z-index 가 바깥으로 못 빠져나간다 → createPortal 로 document.body 직속 렌더. React 이벤트 버블링은 React 트리기준이라 Provider/상위 핸들러가 그대로 동작한다는 점까지 연결.

[감점 답변] "그냥 useState 로 배열 만들어요." [좋은 답변] Context 로 showToast 를 노출 + useReducer 로 ADD/REMOVE 액션 일원화 + 각 토스트마다 id 부여(겹침 방지). 트레이드오프: Provider 필수, 렌더 최적화 필요 시 useSyncExternalStore/외부 store 고려.

[감점 답변] setTimeout(() => remove(), 3000) 만 작성. [좋은 답변] useEffect 안에서 타이머 등록 후 cleanup 에서 clearTimeout 해 언마운트/수동 닫기 시 dangling timer 방지, 의존성에 id 만 넣어 타이머 재시작 방지, hover pause 같은 기능은 clearTimeout 후 남은 시간을 기록해 재시작하는 패턴까지.

[감점 답변] "role="alert" 붙여요" 만 반복. [좋은 답변] 성격에 따라 구분: 일반 정보/성공은 role="status"(= aria-live="polite"), 실패·중요 경고는 role="alert"(= assertive). 포커스 탈취는 하지 말고, 키보드로 닫기(Esc) 와 충분한 표시 시간(최소 5초+)도 함께 언급.