React - toast 에러 처리 + ErrorBoundary 병행

npm install react-toastify

import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function fetchUser() {
  fetch('/api/user')
    .then((res) => {
      if (!res.ok) throw new Error('사용자 정보를 불러오지 못했습니다.');
      return res.json();
    })
    .then((data) => console.log(data))
    .catch((err) => toast.error(err.message));
}

export default function UserPage() {
  return (
    <>
      <button onClick={fetchUser}>유저 불러오기</button>
      <ToastContainer />
    </>
  );
}


// ErrorBoundary.tsx
class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  render() {
    if (this.state.hasError) return <h2>문제가 발생했습니다.</h2>;
    return this.props.children;
  }
}