[컴포넌트] Snackbar 컴포넌트 사용 가이드

스낵바 컴포넌트 사용 목적

• 등록 / 수정 / 삭제 작업 이후 사용자에게 작업 결과 메시지를 간단하게 띄워주기 위함.
• 등록 이후 결과가 어떻게 되었는지 확실하게 알림을 받으면 좋으니까.

1. Snackbar 컴포넌트 import

import Snackbar from '../components/common/Snackbar';

공통 컴포넌트 아래에 있어요

2. 스낵바 오픈 상태 관리하기

  // '스낵바'라는 이름보다는 이해하기 쉽도록 'resultMessageOpen'이라는 변수명을 썼어요
  const [resultMessageOpen, setResultMessageOpen] = useState(false);

  const openResultMessage = () => {
    setResultMessageOpen(true);
  };
  const closeResultMessage = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    setResultMessageOpen(false);
  };

resultMessageOpen 상태는 스낵바 알림창이 노출된 상태인지 닫힌 상태인지를 저장하는 변수예요.
setResultMessageOpen을 통해 노출상태 true가 되었을 때만 스낵바가 나타나요.

3. 컴포넌트 삽입

 <Snackbar
  open={resultMessageOpen}
  closeHandler={closeResultMessage}
  message={'프로필이 수정되었습니다.'}
  durationProps={1000}
/>

컴포넌트 props

• open : 스낵바를 보여주기 위해 스낵바 오픈 state를 value로 넣어주세요. (필수)
• closeHandler : 스낵바를 닫기 위해 스낵바 오픈 state를 false로 세팅해주는 핸들러를 넣어주세요. (필수)
• message : 스낵바를 통해 보여줄 문구를 적어주세요. (필수)
• durationProps : 스낵바를 얼마나 오래 보여줄건지 밀리세컨드로 넣어주세요. (1000 = 1초. 필수아님. 기본값 2000)