[Notistack] 알림 스택 라이브러리 notistack 사용방법

미리보기

 

소개

Noistack 라이브러리는 React 애플리케이션에서 간편하게 알림(Notification)과 같은 메시지를 처리할 수 있도록 도와주는 유틸리티입니다.

주로 Material-UI(MUI)와 함께 사용하며, 스낵바(Snackbar)를 활용한 사용자 피드백을 쉽게 구현할 수 있습니다.

 

주요 특징

1. 간단한 사용법: 기본적으로 훅(hook)을 통해 알림을 호출.
2. Customizable: 알림 스타일 및 동작을 자유롭게 설정 가능.
3. Stacking 지원: 여러 알림을 동시에 쌓아 보여줌.

---

1. 설치

npm install notistack

---

2. 기본 사용법

1) Provider 설정

SnackbarProvider를 루트 컴포넌트에 추가합니다.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { SnackbarProvider } from "notistack";

ReactDOM.render(
  <SnackbarProvider maxSnack={3}>
    <App />
  </SnackbarProvider>,
  document.getElementById("root")
);

• maxSnack: 동시에 표시할 수 있는 최대 알림 개수.

---

2) 알림 호출

useSnackbar 훅을 사용해 알림을 호출합니다.

import React from "react";
import { useSnackbar } from "notistack";

const MyComponent = () => {
  const { enqueueSnackbar } = useSnackbar();

  const handleClick = () => {
    enqueueSnackbar("이것은 알림입니다!", { variant: "success" });
  };

  return <button onClick={handleClick}>알림 표시</button>;
};

export default MyComponent;

• enqueueSnackbar: 알림을 호출하는 함수.
• variant: 알림 유형 (default, success, error, warning, info).

---

3. 커스터마이징

1) 스타일 커스터마이징

SnackbarProvider에서 anchorOrigin이나 autoHideDuration을 설정합니다.

<SnackbarProvider
  maxSnack={3}
  autoHideDuration={3000}
  anchorOrigin={{
    vertical: "top",
    horizontal: "center",
  }}
>
  <App />
</SnackbarProvider>

2) 아이콘 및 액션 추가

enqueueSnackbar에 옵션을 추가해 알림을 확장할 수 있습니다.

enqueueSnackbar("삭제하시겠습니까?", {
  variant: "warning",
  action: (key) => (
    <button onClick={() => console.log(`Action for ${key}`)}>Undo</button>
  ),
});

---

4. 고급 기능

1) 알림 닫기

알림을 닫으려면 closeSnackbar를 사용합니다.

const { enqueueSnackbar, closeSnackbar } = useSnackbar();

const handleClick = () => {
  const key = enqueueSnackbar("닫을 수 있는 알림", {
    action: (key) => (
      <button onClick={() => closeSnackbar(key)}>닫기</button>
    ),
  });
};

2) Context API와 함께 사용

별도 Context를 만들어 글로벌하게 알림 호출.

---

실전 예제: 성공/실패 알림

const MyComponent = () => {
  const { enqueueSnackbar } = useSnackbar();

  const handleSuccess = () => {
    enqueueSnackbar("성공적으로 처리되었습니다!", { variant: "success" });
  };

  const handleError = () => {
    enqueueSnackbar("에러가 발생했습니다.", { variant: "error" });
  };

  return (
    <div>
      <button onClick={handleSuccess}>성공 알림</button>
      <button onClick={handleError}>에러 알림</button>
    </div>
  );
};

 

참고자료

https://notistack.com/

Notistack: Show feedback to your users with a call of a function