알림은 사용자에게 중요한 정보를 전달하기 위해 웹사이트/웹 애플리케이션에 표시되는 메시지입니다. 웹 애플리케이션에서 중요한 역할을 합니다. React에서 알림을 생성하는 방법에는 여러 가지가 있지만, Chakra UI는 이 과정을 쉽고 효율적으로 만들어줍니다.
Chakra UI는 사용자 정의 가능하고 접근 가능한 UI 컴포넌트 세트를 제공하는 React의 인기 컴포넌트 라이브러리입니다.
차크라 UI 설치하기
많은 React 컴포넌트 라이브러리 중 하나인 차크라 UI 라이브러리를 사용하려면 먼저 라이브러리를 설치해야 합니다.
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
또는 다음 터미널 명령을 node.js 프로젝트 디렉터리에서 실행하여 설치하거나, Yarn을 사용하여 Chakra UI를 설치할 수 있습니다. 설치하려면 다음 명령을 실행하세요:
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
차크라 UI 설정
차크라 UI를 설치한 후에는 애플리케이션에서 사용할 수 있도록 설정해야 합니다. 이를 위해서는 차크라 프로바이더 컴포넌트를 설정해야 합니다.
차크라 프로바이더 컴포넌트는 차크라 UI 라이브러리가 제공하는 최상위 컴포넌트입니다. 전체 애플리케이션을 감싸고 모든 구성 요소에 테마 및 스타일링 컨텍스트를 제공합니다.
차크라 프로바이더 컴포넌트를 설정하려면 @chakra-ui/react에서 가져옵니다:
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { ChakraProvider } from '@chakra-ui/react'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<ChakraProvider>
<App />
</ChakraProvider>
</React.StrictMode>
)
차크라 프로바이더 컴포넌트는 테마 프로퍼티를 지원합니다. 테마 프로퍼티를 ChakraProvider 컴포넌트에 전달하면 애플리케이션의 모든 Chakra UI 컴포넌트가 제공된 테마 및 스타일링 컨텍스트에 액세스할 수 있습니다. 테마 프로퍼티는 선택 사항이며, 전달하지 않으면 차크라 UI는 기본 테마를 사용합니다.
경고 구성 요소를 사용하여 사용자 지정 경고 만들기
차크라 UI는 사용자 지정 경고를 만들 수 있는 네 가지 구성 요소(경고, 경고 아이콘, 경고 제목 및 경고 설명)를 제공합니다.
알림 메시지를 만들려면 Chakra UI 라이브러리에서 이러한 구성 요소를 가져와서 다음과 같이 사용하세요:
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle} from '@chakra-ui/react'
function App() {
return (
<div>
<Alert status='success'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
</div>
)
}
export default App
컴포넌트를 가져온 후 경고 컴포넌트는 사용자에게 메시지를 표시합니다. 메시지가 성공 메시지임을 나타내는 “성공”으로 설정된 상태 프로퍼티가 있습니다.
다른 세 가지 상태가 있습니다: “정보”, “오류” 및 “경고”. 알림에 사용되는 색 구성표와 아이콘은 메시지 상태에 따라 달라집니다.
경고 구성 요소에는 세 개의 자식이 있습니다: AlertIcon, AlertTitle 및 AlertDescription입니다. AlertIcon 구성 요소는 메시지 옆에 작은 아이콘을 표시하고, AlertTitle은 기본 메시지를 표시하며, AlertDescription은 메시지에 대한 더 자세한 설명을 표시합니다.
이전 코드 블록은 다음과 같은 경고를 생성합니다:
변형 프롭을 사용하여 경고 메시지 사용자 지정
경고 메시지의 모양을 사용자 지정하려면 경고 구성 요소의 변형 프롭을 사용합니다. 변형 프로퍼티는 알림 메시지의 시각적 모양을 정의하고 전달한 값에 따라 메시지의 색 구성표, 아이콘 및 글꼴 굵기를 결정합니다.
변형 프로퍼티는 미묘, 단색, 왼쪽 강조, 위쪽 강조, 오른쪽 강조, 아래쪽 강조와 같은 여러 문자열 값을 허용합니다. 각 값은 알림 메시지의 다른 시각적 스타일을 나타냅니다.
다음은 서로 다른 변형을 가진 네 가지 알림 구성 요소의 예입니다.
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} from '@chakra-ui/react'
function App() {
return (
<div>
<Flex justify='center' gap='3' direction='column' mt='4'>
<Alert status='success' variant='solid'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
<Alert status='success' variant='subtle'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
<Alert status='success' variant='top-accent'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
<Alert status='success' variant='left-accent'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
</Flex>
</div>
)
}
export default App
위의 코드 블록을 렌더링하면 다음과 같은 사용자 지정 알림이 표시됩니다:
className 프로퍼티를 사용하여 알림 메시지 사용자 지정하기
알림 메시지의 기본 모양을 고수하는 대신 className 프로퍼티를 사용하여 알림 메시지를 사용자 지정할 수 있습니다. className 프로퍼티를 사용하여 CSS 클래스를 정의하고 사용자 지정 스타일을 알림 메시지에 적용할 수 있습니다.
예:
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle} from '@chakra-ui/react'
function App() {
return (
<div>
<Alert status='success' className='alert'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
</div>
)
}
export default App;
이 예에서 알림 컴포넌트에는 CSS 클래스 “alert”가 있습니다. CSS 클래스를 정의한 후 CSS 파일에서 스타일을 정의할 수 있습니다.
이와 같이:
.alert {
color: red;
font-family: cursive;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
위의 코드는 경고 컴포넌트에 CSS 스타일을 적용합니다. Chakra UI 스타일 프로퍼티에 익숙한 경우 className 프로퍼티 대신 해당 프로퍼티를 사용하여 경고 메시지의 스타일을 지정해야 합니다.
위의 CSS 스타일을 적용하면 아래 이미지와 같이 경고 컴포넌트가 표시됩니다:
사용자 이벤트에 대한 응답으로 경고 메시지 트리거
화면에 경고 메시지를 일관되게 표시하는 경고 컴포넌트를 만들었습니다. 그러나 사용자 경험을 향상시키기 위해 JavaScript 이벤트 리스너를 사용하여 사용자가 시작한 특정 이벤트에 대한 응답으로 경고 메시지를 트리거할 수 있습니다. 이러한 이벤트에는 버튼 클릭, 양식 제출 또는 오류 발생 등이 포함될 수 있습니다.
이벤트에 대한 응답으로 경고 메시지를 트리거하려면 React 상태와 차크라 UI 컴포넌트의 디스플레이 프로퍼티를 사용하세요.
예:
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} from '@chakra-ui/react'
function App() {
const [display, setDisplay] = React.useState('none');
function notify() {
setDisplay('flex');
}
function close() {
setDisplay('none');
}
return (
<div className="app">
<Alert status='success' display={display} variant='solid'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
<CloseButton position='absolute' top='6px' right='6px' onClick={close}/>
</Alert>
<Button onClick={notify} mt='4'>Click Me</Button>
</div>
)
}
export default App
이 코드 블록은 useState 훅으로 알림 디스플레이의 상태를 관리합니다. 이 코드 블록은 알림 표시의 초기 상태를 ‘없음’으로 설정하여 알림을 숨깁니다.
사용자가 버튼을 클릭하면 알림 함수를 호출합니다. 알림 함수를 호출하면 표시 상태 값이 “없음”에서 “플렉스”로 변경되어 알림이 표시됩니다.
사용자가 closeButton을 클릭하면 닫기 함수를 호출합니다. 디스플레이의 상태를 다시 “없음”으로 변경하여 알림을 숨깁니다.
이제 사용자 정의 가능한 알림을 만들 수 있습니다
이제 Chakra UI를 사용하여 React 애플리케이션에서 사용자 정의 알림을 만드는 방법을 배웠습니다. 차크라 UI를 사용하면 React에서 사용자 정의 알림을 쉽고 직관적으로 생성하여 사용자에게 명확하고 간결한 정보를 제공할 수 있습니다. Chakra UI는 사용자 정의가 가능하고 접근 가능한 다른 많은 UI 컴포넌트를 제공하여 훌륭한 React 애플리케이션을 구축하는 데 도움을 줍니다.