• 목록

✅ 토스트 메시지 하나 띄우는데 10줄 넘게 쓴다면 뭔가 잘못됐다

전역 메시지 핸들링 패턴

API 호출 후 사용자에게 피드백 주기 위해 토스트 메시지를 띄운다:

const handleSave = async () => {
  setLoading(true);
  try {
    await save();
    setToast("저장 완료!");
  } catch (e) {
    setToast("오류 발생");
  } finally {
    setLoading(false);
  }
};

이 코드가 여기저기 중복되기 시작하면
토스트만 10줄씩 쓰는 상황이 생긴다.

✅ 해결: 전역 토스트 훅

// useToast.ts
const ToastContext = createContext(() => {});
export const useToast = () => useContext(ToastContext);

// ToastProvider.tsx
const [message, setMessage] = useState("");
<ToastContext.Provider value={setMessage}>...</ToastContext.Provider>

// 어디서든 사용
const toast = useToast();
toast("저장 완료!");

전역에서 한 줄로 처리되면
중복도 줄고 가독성도 높아진다.