React에서 알림 컴포넌트를 생성하기 위한 여러 타사 패키지를 사용할 수 있다는 것은 직접 빌드하는 대신 미리 빌드된 솔루션을 사용할 수 있는 옵션이 있다는 것을 의미합니다. 그러나 단순성과 종속성 최소화를 원하는 사용자에게는 필요하지 않은 기능이 포함된 추가 컴포넌트를 통합하는 것보다 자체 알림 컴포넌트를 개발하는 것이 더 적합할 수 있습니다.
프로젝트 설정하기
Vite는 빌드 도구로서의 기능을 활용하여 개발자가 최소한의 노력으로 React 개발을 위한 기능적 환경을 신속하게 생성할 수 있는 React 애플리케이션을 구축하기 위한 플랫폼 역할을 수행합니다.
시작하려면 Yarn 패키지 관리자를 사용하여 아래 제공된 지침을 실행하여 새로운 Vite 벤처를 설립하십시오.
yarn create vite
프로젝트 이름을 입력하고, 프레임워크(React)를 선택한 후, 변형(JavaScript)을 선택합니다.
본 가이드에서는 다음 설정을 사용합니다:
Vite에서 프로젝트가 생성되면 프로젝트 디렉토리로 이동하여 통합 개발 환경(IDE)을 사용하여 프로젝트를 엽니다.
다음 지시어를 실행하여 개발 서버를 시작하는 프로세스를 시작합니다.
yarn dev
이 명령을 실행하면
알림 컴포넌트 디자인하기
다용도 알림 요소는 다양한 제목, 설명, 테마를 가진 다양한 유형의 알림에 적응할 수 있는 기능을 가져야 합니다. 예를 들어 경고, 성공, 실패 알림을 표시할 수 있어야 합니다.
다음은 알림 요소가 기능을 발휘할 것으로 예상되는 다양한 방식입니다.
복합 구성 요소의 프로퍼티를 사용하면 애플리케이션 전체에 걸쳐 최소한의 사용자 정의가 필요한 통합 알림 구성 요소를 재사용할 수 있습니다.이 구성 요소를 달성하기 위해 프로퍼티를 우회하고 알림 목록 유형, 제목 및 설명 텍스트를 지정하면 각 구성 요소를 반환하는 동작을 지정하는 애플리케이션을 사용할 수 있습니다. 프로퍼티 사용에 대한 문서에서는 프로퍼티를 우회하고 애플리케이션 전체에서 구성 요소를 재사용하는 방법에 대한 소개를 제공합니다.
알림 컴포넌트 만들기
소스 폴더에 Notification.jsx라는 제목의 새 파일을 생성하고 그 안에 후속 콘텐츠를 포함하세요.
export default function Notification({type, title, description}) {
return (
<div>
{/* Notification content */}
</div>
)
}
본 컴포넌트는 “유형”, “제목”, “설명”이라는 세 가지 속성으로 구성된 “알림”이라는 기능 요소를 탄생시킵니다.이 엔다우먼트는 공지의 모양과 내용을 맞춤 설정하는 데 활용됩니다.
이 구성 요소는 두 가지 그래픽 표현, 특히 정보 심볼과 십자가 심볼로 이루어져 있습니다. 앞서 언급한 아이콘은 다양한 온라인 소스를 통해 무료로 얻을 수 있거나 지정된 명령을 실행하여 설치할 수 있는 리액트 아이콘과 같은 패키지에서 구할 수 있습니다.
yarn add react-icons
알림 구성 요소 내에 전략적으로 배치된 시각적으로 매력적인 아이콘을 통합하여 모바일 애플리케이션의 전반적인 모양과 기능을 향상시키는 효과적인 전략을 구현합니다.
import { RxCross2, RxInfoCircled } from "react-icons/rx"
소품으로 제공되는 아이콘, 제목 정보 및 설명 데이터를 활용하여 알림 콘텐츠를 구성함으로써 구성 요소를 향상시킬 수 있습니다.
export default function Notification({type, title, description}) {
return (
<div>
<div>
<RxInfoCircled/>
<div>
<div>{title}</div>
<div>{description}</div>
</div>
</div>
<RxCross2/>
</div>
)
}
제공된 데이터 유형에 따라 생성된 코드 블록에 적절한 스타일링 방법론이 사용됩니다.
사용할 수 있는 방법에는 표시하고자 하는 각 종류의 알림에 대해 CSS 클래스를 설정하는 것이 포함됩니다. 그런 다음 전달되는 유형에 따라 해당 클래스를 선택적으로 적용할 수 있습니다.
시작하려면 notification.css라는 이름의 새 문서를 생성하고 컴포넌트 시작 시 다음 지시문을 도입하여 Notification.jsx에 통합하세요.
import "./notification.css"
`notification.module.scss` 파일에서 CSS를 활용하여 알림 요소의 기본 스타일 규칙을 설정합니다.
.notification {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 8px;
}
.notification__left {
display: flex;
flex-direction: row;
padding: 0px;
gap: 8px;
margin-right: 24px;
}
.notification__content {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
}
.notification__title {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-size: 14px;
}
.notification__description {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-size: 12px;
padding: 0;
}
열; align-items: center; padding: 10px; } .notification-header { background-color: #4C506D; 색상: 흰색 글꼴 굵기: 굵게 padding: 5px; 테두리-하단: 1px 단색 흰색; } .notification-message { 여백 상단: 10px; padding: 5px; border-
.notification__success {
background: #f6fef9;
border: 1px solid #2f9461;
border-radius: 8px;
}
.notification__error {
background: #fffbfa;
border: 1px solid #cd3636;
border-radius: 8px;
}
.notification__warning {
background: #fffcf5;
border: 1px solid #c8811a;
border-radius: 8px;
}
앞서 언급한 코드는 제공된 카테고리에 따라 알림 컨테이너의 모양을 수정합니다.
다음은 HTML 및 CSS를 사용하여 제목의 스타일을 지정하는 몇 가지 예입니다: 1. HTML에서 인라인 스타일 사용: “`php
제목
자막
“` 2. CSS에서 외부 스타일 사용하기: “`css
제목
부제
.notification__title__success {
color: #2f9461;
}
.notification__title__warning {
color: #c8811a;
}
.notification__title__error {
color: #cd3636;
}
이 섹션의 목적은 3D 모델링 및 애니메이션과 관련된 서비스를 혁신적인 방식으로 제공하는 회사에 대한 정보를 제공하는 것입니다. 이 사업체는 창의성과 첨단 기술에 대한 헌신을 통해 해당 분야의 리더로 자리매김했습니다.이 회사의 팀은 자신의 일에 열정을 갖고 고품질의 결과물을 제공하기 위해 최선을 다하는 숙련된 전문가들로 구성되어 있습니다. 이들은 최첨단 소프트웨어와 장비를 활용하여 광고, 건축, 디지털 프로덕션, 텔레비전, 영화, 비디오 게임, 가상 현실, 증강 현실, 혼합 현실, 교육 훈련 자료, 제품 프레젠테이션, 이벤트, 전시회, 박물관 및 설치물과 같은 다양한 애플리케이션을 위한 시각적으로 매력적인 콘텐츠를 제작합니다. 각 분야에서 다년간의 경험을 바탕으로 인상적인 포트를 구축했습니다
.notification__description__success {
color: #53b483;
}
.notification__description__warning {
color: #e9a23b;
}
.notification__description__error {
color: #f34141;
}
텍스트는 아이콘에 특정 클래스 이름을 적용하도록 요청하고 있습니다.
.notification_icon_error {
color: #cd3636;
}
.notification__icon__success {
color: #2f9461;
}
.notification__icon__warning {
color: #c8811a;
}
알림 컴포넌트에서는 다음과 같이 ‘type’ 속성의 값에 따라 적합한 클래스를 할당하는 조건부 전략을 사용할 수 있습니다:
export default function Notification({type, title, description}) {
return (
<div className={`notification notification__${type}`}>
<div className={`notification__left`}>
<RxInfoCircled className={`notification__icon__${type}`}/>
<div className="notification__content">
<div className={`notification__title notification__title__${type}`}>{title}</div>
<div className={`notification__description notification__description__${type}`}>{description}</div>
</div>
</div>
<RxCross2 className={`notification__icon__${type}`}/>
</div>
)
}
이 구성 요소는 각 유형에 대한 응답으로 알림 성공 또는 알림 오류와 같은 클래스를 사용하여 알림의 동적 분류를 활용합니다.
앞서 설명한 절차는 App.jsx에서 Notification 컴포넌트를 가져와서 적절히 활용함으로써 시연할 수 있습니다:
import Notification from './Notification'
function App() {
return (
<>
<Notification
type="success"
title="Task Completed"
description="Your task has been completed successfully."
/>
</>
)
}
export default App
이제 알림 컴포넌트에서 다양한 유형을 활용하여 각각의 메시지에 해당하는 다양한 성격의 알림을 표시할 수 있습니다.
개인이 특정 색조와 디자인, 특정 맥락을 인지적으로 연결하기 때문에 색상과 스타일 선택의 일관성은 최적의 사용자 경험을 만드는 데 매우 중요합니다. 따라서 정보의 혼동이나 오해를 피하기 위해 이러한 연관성을 일관성 있게 유지하는 것이 중요합니다. 예를 들어, 빨간색 알림 상자를 사용하여 사진 업로드가 성공했음을 표시하면 사용자가 이를 긍정적인 표시가 아닌 오류 메시지로 인식하여 혼동을 일으킬 수 있습니다.
알림 구성 요소에 상호 작용 추가
사용자 지정 가능한 알림 구성 요소의 기능을 향상하기 위해 소품을 활용할 수 있습니다. 또한, 구성 요소에 전환을 통합함으로써 CSS 애니메이션 구현을 통해 전반적인 사용자 경험을 향상시켜 알림이 화면 위아래로 부드럽게 미끄러질 때 매력적인 상호 작용을 제공합니다.