React-Toastify를 사용하여 React에서 사용자 지정 알림을 만드는 방법
경고 메시지는 종종 웹 앱에서 경고, 오류, 성공 메시지 및 기타 중요한 정보를 표시하는 데 사용됩니다.
React에서 경고 메시지를 만들기 위한 몇 가지 인기 있는 패키지와 프레임워크가 있습니다. React-Toastify는 애플리케이션에 알림 및 경고 메시지를 추가할 수 있는 React 라이브러리입니다.
React Toastify 설치
React 프로젝트에 Toastify를 설치하려면 프로젝트 디렉토리에서 다음 명령을 실행하십시오.
npm install --save react-toastify
토스트파이 설정하기
Toastify 패키지를 사용하려면 패키지에서 제공하는 ToastContainer , toast 메서드 및 함께 제공되는 CSS 파일을 가져와야 합니다.
앱 구성 요소 내부 의 ToastContainer 는 생성된 모든 토스트 알림을 저장합니다.
import { ToastContainer, toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';
function App() {
return(
<div>
<ToastContainer/>
</div>
);
}
토스트 메서드를 사용하여 React 프로젝트에 대한 토스트 알림을 만들 수 있습니다 .
function App() {
const notify = () => toast.success("Hello There!");
return(
<div>
<button onClick={notify}>Notify</button>
<ToastContainer/>
</div>
);
}
이 코드가 생성하는 버튼을 클릭하면 toast.success 메소드를 호출하여 “Hello There!” 문자열을 전달합니다. 이렇게 하면 다음과 같이 화면에 메시지를 표시하는 토스트 알림이 생성됩니다.
toast.info() , toast.error() , toast.success() , toast.warning () 과 같이 호출할 수 있는 다양한 유형의 토스트 메서드가 있습니다 . 이러한 각 방법에는 메시지 유형을 반영하는 미묘한 색상 스타일이 있습니다.
토스트 알림 배치
기본적으로 토스트 알림은 웹 앱 화면의 오른쪽 상단에서 팝업됩니다. ToastContainer 에서 position 속성을 설정하여 이를 변경할 수 있습니다 . 사용 가능한 위치 값은 top-right, top-center, top-left, bottom-right, bottom-center 및 bottom-left입니다.
예를 들어:
function App() {
const notify = () => toast.success("Hello There!");
return(
<div>
<button onClick={notify}>Notify</button>
<ToastContainer position="top-left"/>
</div>
);
}
ToastContainer 의 위치 소품을 왼쪽 상단으로 설정하면 모든 토스트 알림이 화면 왼쪽 상단에서 팝업됩니다.
토스트 메서드 의 position prop을 사용하여 개별 토스트 알림의 기본 위치를 변경할 수 있습니다 .
function App() {
const notify = () => toast.success("Hello There!", {position: toast.POSITION.TOP_CENTER});
return(
<div>
<button onClick={notify}>Notify</button>
<ToastContainer position="top-left"/>
</div>
);
}
CSS position 속성을 사용하여 Toast 알림을 배치할 수도 있지만 Toastify의 position prop이 이를 수행하는 표준 방법입니다.
Toast 메서드 및 ToastContainer의 autoClose 소품 처리
토스트 알림 표시 시간을 변경할 수 있습니다. autoClose 소품 을 사용하여 토스트 알림이 열려 있는 시간을 제어할 수 있습니다 . 모든 토스트 알림 및 개인별 토스트 알림의 지연 시간을 변경할 수 있습니다. autoClose 소품 은 부울 값 false 또는 밀리초 단위의 지속 시간만 허용합니다.
모든 토스트 알림의 지연 시간을 변경하려면 ToastContainer 요소 내에서 autoClose 소품을 사용하십시오.
예를 들어:
function App() {
const notify = () => toast.success("Hello There!");
return(
<div>
<button onClick={notify}>Notify</button>
<ToastContainer autoClose={5000}/>
</div>
);
}
위의 설정을 사용하면 모든 토스트 알림이 정확히 5초(5,000밀리초) 동안 표시됩니다.
각 토스트 방법의 autoClose 속성을 사용하여 개별 토스트 알림의 지연 시간을 사용자 지정할 수 있습니다.
예를 들어:
function App() {
const notifyOne = () => toast.info("Will close in 10 seconds", {autoClose: 10000});
const notifyTwo = () => toast.info("Will close in 15 seconds", {autoClose: 15000});
return (
<div>
<button onClick={notifyOne}>Notify One</button>
<button onClick={notifyTwo}>Notify Two</button>
<ToastContainer />
</div>
);
}
토스트 알림이 기본적으로 닫히는 것을 방지하려면 autoClose 소품을 false 로 설정할 수 있습니다 . ToastContainer 의 autoClose 소품 을 false 로 설정하여 사용자가 각 알림 메시지를 수동으로 닫도록 할 수 있습니다 .
예를 들어:
function App() {
const notify = () => toast.info("Hello There!");
return (
<div>
<button onClick={notify}>Notify</button>
<ToastContainer autoClose={false} />
</div>
);
}
개별 토스트 방법 의 autoClose 소품을 false 로 설정하면 특정 토스트 알림이 기본적으로 닫히지 않습니다.
Toastify로 문자열이 아닌 알림 렌더링
알림 메시지로 작업할 때 문자열, 반응 구성 요소 및 숫자를 알림 메시지로 렌더링할 수 있습니다. React 구성 요소를 토스트 알림으로 렌더링하려면 구성 요소를 만들고 토스트 메서드를 사용하여 렌더링합니다.
예를 들어:
function Message({toastProps, closeToast}) {
return (
<div>
<p>Welcome {toastProps.position}</p>
<button onClick={closeToast}></button>
</div>
)
}
export default Message;
이 코드 블록은 Message 구성 요소를 만듭니다 . 구성 요소를 알림으로 렌더링할 때 toast는 구성 요소에 toastProps 및 closeToast 소품을 추가합니다. closeToast 소품 은 알림을 닫는 데 사용할 수 있는 기능입니다. toastProps 소품은 위치, 유형 및 기타 특성을 포함하여 토스트 알림에 대한 세부 정보를 저장하는 속성이 있는 개체입니다 .
메시지 구성 요소를 가져온 다음 toast() 함수에 전달하여 알림 메시지로 렌더링합니다.
import { ToastContainer, toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';
import Message from "./components/Message";
function App() {
const msg = () => toast(<Message />);
return (
<div>
<button onClick={msg}>Welcome</button>
<ToastContainer />
</div>
);
}
버튼을 클릭하면 질문과 두 개의 버튼이 포함된 알림이 화면에 표시됩니다.
토스트 알림 스타일 지정
토스트 알림에 기본 스타일을 사용할 필요가 없습니다. 웹 애플리케이션에 적합한 원하는 디자인 테마 또는 패턴에 맞게 사용자 정의할 수 있습니다.
토스트 알림의 스타일을 지정하려면 className 을 지정하고 CSS 파일 내에서 사용자 지정을 적용합니다.
예를 들어:
function App() {
const notify = () => toast.success("Hello There!", {className: "toast-message"});
return (
<div>
<button onClick={notify}>Notify</button>
<ToastContainer position="top-center" />
</div>
);
}
알림에 첨부된 className 을 사용 하여 CSS 파일 내에서 원하는 대로 토스트 알림의 스타일을 지정할 수 있습니다.
.toast-message {
background-color: #000000;
color: #FFFFFF;
font-size: 20px;
padding: 1rem 0.5rem;
}
위의 사용자 지정 스타일 지정 결과 알림은 다음과 같이 표시됩니다.
웹 애플리케이션에 대한 토스트 알림
이제 React-Toastify 패키지 및 사용 가능한 방법을 사용하여 React에서 사용자 지정 알림을 만들 수 있습니다. 이러한 사용자 지정 경고/알림을 원하는 대로 지정하면 웹 응용 프로그램의 사용자 경험을 향상시킬 수 있습니다.
React-Toastify는 번거로움 없이 React 프로젝트에 사용자 지정 알림을 포함하는 빠르고 효과적인 방법을 제공합니다.
답글 남기기