실전 가이드

기본값과 개별 호출 설정

옵션은 전역 toastOptions, 타입별 기본값, 호출 옵션 순으로 병합됩니다. 중첩된 style과 ariaProps도 병합되며, iconTheme은 가장 구체적으로 지정한 값을 사용합니다.

<Toaster
  position="bottom-center"
  limit={4}
  gutter={12}
  toastOptions={{
    duration: 5000,
    style: { background: '#111827', color: '#fff' },
    success: { duration: 2000 },
  }}
/>

toast.success('게시했습니다', { duration: 3000 });

이 호출에는 3000ms가 적용되지만 전역 스타일은 유지됩니다. 알림별 position은 활성 Toaster 위치와 다를 수 있지만, Toaster에 설정된 활성 위치와 일치하는 항목만 렌더링됩니다. 여러 위치에 스택을 동시에 표시하려면 별도의 Toaster를 사용하세요.

여러 Toaster로 요청 보내기

<>
  <Toaster toasterId="app" position="top-right" />
  <Toaster toasterId="editor" position="bottom-center" />
</>

toast.success('초안을 저장했습니다', { toasterId: 'editor' });
toast.dismiss(undefined, 'editor');

고유한 toasterId를 사용하세요. ID가 같은 두 Toaster는 하나의 레지스트리 항목을 두고 경쟁하므로 서로 격리되지 않습니다.

Promise와 로딩 흐름

toast.promise는 하나의 ID를 갱신하면서 원래 Promise의 의미를 유지합니다. 단독으로 호출한 toast.loading은 표시 시간이 무한하므로 ID를 보관했다가 같은 ID로 갱신하거나 명시적으로 제거하세요.

const id = toast.loading('업로드 중...');
try {
  await upload();
  toast.success('업로드했습니다', { id });
} catch (error) {
  toast.error(`업로드 실패: ${String(error)}`, { id });
}

행 사용자 지정

행을 완전히 제어하려면 Toaster의 children을 사용하세요. 도우미는 애니메이션과 함께 닫는 dismiss와 즉시 제거하는 remove를 제공합니다. 기본 아이콘, 접근성 속성, 모션은 유지하면서 레이아웃만 바꾸려면 사용자 지정 타입이 아닌 항목을 ToastBar로 감싸세요.

<Toaster>
  {(item, { dismiss }) => (
    <ToastBar toast={item}>
      {({ icon, message }) => <button onClick={dismiss}>{icon}{message}</button>}
    </ToastBar>
  )}
</Toaster>

완전히 사용자 지정한 자식 요소는 자체 role과 라이브 리전 동작을 직접 관리해야 합니다.

스태킹 컨텍스트가 방해할 때 최상위 레이어 사용

<Toaster transport="top-layer" />는 지원되는 브라우저에서 수동 팝오버를 사용하고, 지원되지 않으면 인라인 고정 위치 컨테이너로 대체합니다. 애플리케이션의 transform이나 z-index 컨텍스트가 알림을 가릴 때 사용하세요. 위치와 컨테이너 재정의는 그대로 적용됩니다.