10분 안에 React 글로벌 알림 팝업 설정하는 방법

작업 후 모든 구성 요소에 경고 팝업을 추가하는 것은 성가신 일입니다. 글로벌 알림 팝업은 삶을 더 쉽게 만들어 줄 뿐만 아니라 사용자 경험을 향상시킵니다. 멋진 경고 팝업은 사용자의 작업 및 서버 응답의 결과로 사용자에게 명확한 피드백을 제공합니다.

컨텍스트 후크를 사용하여 10분 안에 React에서 전역 경고 팝업을 설정하는 방법은 다음과 같습니다.

AlertContext 생성

경고 컨텍스트에는 text 및 type 의 두 가지 상태가 있습니다. text는 경고에 표시되는 메시지이고 type는 경고의 "심각도"(성공/정보/경고/오류)입니다.

컨텍스트에는 setAlert()라는 하나의 작업이 있습니다. 텍스트와 유형을 매개변수로 받아 상태로 설정합니다. 설정된 시간이 지나면 상태가 다시 비어 있음으로 설정됩니다.

// AuthContext.js
import { createContext, useState } from 'react';

const ALERT_TIME = 5000;
const initialState = {
  text: '',
  type: '',
};

const AlertContext = createContext({
  ...initialState,
  setAlert: () => {},
});

export const AlertProvider = ({ children }) => {
  const [text, setText] = useState('');
  const [type, setType] = useState('');

  const setAlert = (text, type) => {
    setText(text);
    setType(type);

    setTimeout(() => {
      setText('');
      setType('');
    }, ALERT_TIME);
  };

  return (
    <AlertContext.Provider
      value={{
        text,
        type,
        setAlert,
      }}
    >
      {children}
    </AlertContext.Provider>
  );
};

export default AlertContext;

앱 구성요소 주위에 컨텍스트 제공자를 래핑하는 것을 잊지 마십시오.

// index.js
ReactDOM.render(
  <AlertProvider>
   <App />
  </AlertProvider>,
  document.getElementById('root')
);

맞춤 사용경고 후크

AlertContext의 상태 및 작업에 액세스하려면 사용자 지정 useAlert 후크를 만듭니다.

// useAlert.js
import { useContext } from 'react';
import AlertContext from '../contexts/AlertContext';

const useAlert = () => useContext(AlertContext);

export default useAlert;

팝업 구성 요소

다음으로 useAlert의 텍스트와 유형으로 경고를 표시하는 팝업 구성 요소를 만듭니다. setAlert가 텍스트와 유형을 AlertContext에 전달하면 팝업이 나타나고 설정된 시간이 지나면 사라집니다.

MaterialUI에서 Alert을 사용하여 보기 좋게 만듭니다.

// AlertPopup.js
import { Alert } from '@mui/material';
import useAlert from '../../hooks/useAlert';

const AlertPopup = () => {
  const { text, type } = useAlert();

  if (text && type) {
    return (
      <Alert
        severity={type}
        sx={{
          position: 'absolute',
          zIndex: 10,
        }}
      >
        {text}
      </Alert>
    );
  } else {
    return <></>;
  }
};

export default AlertPopup;

어디서나 볼 수 있도록 앱 구성 요소 위에 AlertPopup을 배치합니다.

//route.js
const routes = [
  {
    path: '/',
    element: (
      <AlertPopup />
      <Dashboard />
    ),
    children: [ ... ]
  }
]

구성 요소에서 사용

경고 팝업을 표시하려면 구성 요소의 작업 피드백에 대해 setAlert를 호출하십시오.

const { setAlert } = useAlert();
...
<Button onClick={setAlert('Edit success!', 'success')}>
  Edit
</Button>

경고를 사용하여 사용자에게 서버 응답을 표시하는 것은 항상 좋습니다.

try {
  const res = await axios.post('api/user/login');
  setAlert('Login success!', 'success');
} catch(err) {
  setAlert(err.message, 'error');
}