[React] react-hot-toast 사용하여 토스트 알림 UI 간편하게 만들기

 

안녕하세요 오늘은  react-hot-toast 라이브러리를 사용해 간단하고 예쁘게 토스트 메시지(알림) ui 를 구현해보겠습니다.

 

토스트 메시지(Toast message) 란 사용자에게 짧고 간결한 피드백을 제공하기 위해 사용되는 팝업 알림으로, 일정 시간이 지나면 자동으로 사라지며 사용자의 상호작용 없이 정보를 전달하는 데에 사용 되는 요소 입니다. 

 

 

1. react-hot-toast 설치 

프로젝트의 루트 디렉토리 위치에서 해당 라이브러리를 설치해줍니다. 

npm install react-hot-toast

 

 

 

2. 원하는 자바스크립트 파일에 react-hot-toast 를 import 해줍니다 

About.jsx

import { toast } from 'react-hot-toast';

 

 

3. 토스트 메시지를 띄우고자 하는 곳에 추가해줍니다. 

클릭 이벤트 발생시 메시지를 띄울 예정이므로 on click 이벤트를 걸어줍니다 

  <Link
              to="projects"
              spy={true}
              smooth={true}
              offset={-80}
              duration={500}
              onClick={() => toast.error("This didn't work.")}
              className="inline-block bg-indigo-600 text-white px-6 py-3 rounded-lg text-lg hover:bg-indigo-500 transition cursor-pointer"
            >
              See My Projects
            </Link>

 

"See my Projects" 라는 이름을 가진 버튼(링크) 클릭 시, 토스트 메시지가 뜰 예정입니다. 

 

 

4. 토스트 메시지를 띄우기 위해서는 About.jsx 를 불러오고 실행시키는 메인 스크립트 App 에서도 import 및 컴포넌트를 명시적으로 추가해줘야 토스트 메시지가 정상 작동할 수 있습니다. 

import { Toaster } from "react-hot-toast";

.
.
.
.
 <div style={{ minHeight: "200vh" }}>
        {" "}
        <Toaster position="top-center" /> => 위치는 상관없습니다 
        <VideoBackground />
        <Header />
        <Hero />
        <FadeInSection>
          <About />
        </FadeInSection>
        <FadeInSection>
          <ServicesSection />
        </FadeInSection>
        <FadeInSection>
          <StatsSection />
        </FadeInSection>
        <ProjectGallery />
        <BlogSlider />
        <SimpleCounter />
        <SimpleTodo />
        <SimpleCalculator />
        <ThreeDPortfolio />
        <AvatarPortfolio />
        <ParticlePortfolio />
        <Contact />
      </div>
    </>
  );
}

 

 

 

결과 화면입니다.

아직 project 화면이 구성되지 않았기 때문에 사용자는 접근할 수 없습니다. 

 

 

혹은 아래와 같이 성공 토스트 메시지를 띄울 수도 있습니다 

 

 

 

감사합니다