스타일 지정 목적으로 사용자 정의 CSS를 구현하는 과정은 처음에는 꽤 즐거울 수 있지만 프로젝트가 복잡해지면 모든 페이지에서 디자인이 일관성을 유지하도록 하는 것이 점점 더 어려워집니다. 주요 과제 중 하나는 시각적 요소의 일관성을 유지하면서 프로젝트의 복잡성을 관리하는 것입니다.
미리 정해진 UI 요소와 편리한 유틸리티 속성을 사용하여 애플리케이션에 세련된 외관을 부여하고자 할 때 Chakra UI와 같은 사용자 인터페이스(UI) 스타일링 라이브러리를 활용하는 것이 CSS에만 의존하는 것보다 더 효율적인 접근 방식임을 입증할 수 있습니다.
React 애플리케이션에서 차크라 UI 시작하기
차크라 UI 시작하기 , 계속해서 create-react-app 명령을 사용하여 기본 React 애플리케이션을 스캐폴드합니다. 또는 Vite를 사용하여 React 프로젝트를 생성할 수 있습니다.
그 후, 이 소프트웨어 패키지를 위한 일련의 필수 구성 요소를 설치해야 합니다:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
이 프로젝트의 소스 코드는 전용 GitHub 리포지토리를 통해 액세스할 수 있습니다.
차크라 테마 제공자 추가
필요한 종속성을 설치한 후에는 애플리케이션을 차크라 제공자의 범위 내에 포함시켜야 합니다.
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { ChakraProvider } from '@chakra-ui/react'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<ChakraProvider>
<App />
</ChakraProvider>
</React.StrictMode>,
)
애플리케이션에 차크라프로바이더 래퍼를 활용하면 프로젝트 전체에서 차크라 UI와 관련된 모든 구성 요소와 스타일 속성에 액세스할 수 있습니다.
다른 테마 전환
차크라 UI는 밝기, 어둡기 및 시스템 색상 모드를 지원하는 기본 사전 빌드 테마를 제공합니다. 그러나 차크라 문서 에 명시된 대로 테마 개체 내에서 애플리케이션의 UI 테마 및 기타 스타일 속성을 추가로 사용자 지정할 수 있습니다.
어두운 테마 설정과 밝은 테마 설정을 쉽게 전환하려면 “src” 디렉터리 내에 테마 토글러 구성 요소를 설정해야 합니다. “components/Themetoggle.jsx”라는 새 파일을 생성하여 이 작업을 수행할 수 있습니다. 이 기능을 구현하려면 다음 코드 스니펫을 통합해야 합니다:
import React from 'react'
import { useColorMode, Box, IconButton} from '@chakra-ui/react';
import { SunIcon, MoonIcon } from '@chakra-ui/icons'
export default function ThemeToggler() {
const { colorMode, toggleColorMode } = useColorMode();
return (
<Box textAlign="center" py={4} >
<IconButton
icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
onClick={toggleColorMode}
variant="ghost"
/>
<h2>Toggle Theme</h2>
</Box>
);
}
앞서 언급한 아이콘 라이브러리를 가져와서 진행할 수 있습니다:
npm i @chakra-ui/icons
사용자 인터페이스 요소인 테마토글러는 누를 수 있는 버튼을 통해 애플리케이션 내에서 밝은 테마와 어두운 테마 간에 원활하게 전환할 수 있는 토글 메커니즘을 제공합니다.
본 컴포넌트는 “useColorMode” 기능 인터페이스를 통해 활성 색 구성표를 검색하고 “toggleColorMode” 유틸리티 기능을 사용하여 다양한 색상 구성 사이를 번갈아 가며 사용합니다.
아이콘으로서의 상태를 유지하면서 아이콘 버튼 컴포넌트는 클릭할 수 있는 기능도 갖추고 있어 시각적으로 매력적이고 인터랙티브합니다.
로그인 양식 UI 만들기
“components” 디렉토리에 “Login.jsx”라는 새 파일을 만들고 그 안에 다음 코드 블록을 붙여넣으세요.
시작하려면 프로그램에 필요한 여러 모듈을 가져와야 합니다. 여기에는 다음이 포함됩니다: * 파이썬에서 수치 연산에 사용되는 라이브러리인 `numpy`와 `scipy`; * 시각화 및 커스텀 커서를 각각 생성하는 함수를 제공하는 `matplotlib` 및 `mplcursors`; * 표 형식의 데이터로 작업하고 날짜 조작 작업을 수행할 수 있는 `pandas`와 `datetime`; * 머신 러닝 작업에 널리 사용되는 그라디언트 부스팅 프레임워크인 `xgboost`.
import React, { useState } from 'react';
import {
Box,
Button,
Card,
CardBody,
Center,
Flex,
FormControl,
FormLabel,
Heading,
HStack,
Input,
Stack,
VStack,
useColorMode,
} from '@chakra-ui/react';
이러한 UI 구성 요소를 통합한 후 로그인 그래픽 사용자 인터페이스의 모든 측면을 포괄하는 React 함수형 어셈블리 및 주요 리셉터클 요소를 묘사합니다.
function Login() {
const { colorMode } = useColorMode();
return (
<Box>
<Flex justify="center" align="center" height="80vh" >
<Center>
<Stack>
</Stack>
</Center>
</Flex>
</Box>
);
}
export default Login;
Box 컴포넌트는 다른 모든 차크라 UI 요소를 구성하는 데 필수적인 기반이며, 기본 구조를 제공하는 Div 요소로 구성됩니다. 반면, Flex 컴포넌트는 기본적으로 Box 컴포넌트의 수정된 버전으로, 유연한 속성을 활용하여 스타일링할 수 있도록 Display 속성이 변경되었습니다.
센터 컴포넌트와 스택 컴포넌트 모두 레이아웃 도구로 사용되지만, 기능에는 미묘한 차이가 있습니다. 특히 센터 컴포넌트는 모든 자손을 핵심에 배치하는 것을 목표로 하는 반면, 스택 배열은 개별 시각적 요소를 집계하고 요소 간 간격을 도입합니다.
이제 Header 컴포넌트를 사용하여 양식의 헤더 섹션을 구성하겠습니다. 이를 위해 Form 컴포넌트 내부에 위치한 Stack 컴포넌트 안에 필요한 코드를 포함시켜야 합니다.
<VStack spacing='6'>
<Heading
fontWeight='500'
fontSize='30px'
letterSpacing='-0.5px'
>
Login
</Heading>
</VStack>
`VStack` 요소는 하위 컴포넌트를 수직으로 배열하는 데 사용됩니다. 그 후, 로그인 양식과 그에 수반되는 요소를 포함하는 “카드”라는 새로운 구성 요소를 구성합니다.
<Card bg='#f6f8fa' variant='outline' borderColor='#d8dee4' w='308px'
size="lg" borderRadius={8} boxShadow="lg"
>
<CardBody>
<form>
<Stack spacing='4'>
<FormControl isRequired>
<FormLabel size='sm'
color={colorMode === 'dark' ? 'black' : 'black'}
>Email Address</FormLabel>
<Input
type='text'
bg='white'
borderColor='#d8dee4'
size='sm'
borderRadius='6px'
color={colorMode === 'dark' ? 'black' : 'black'}
value={email}
/>
</FormControl>
<FormControl isRequired>
<HStack justify='space-between'>
<FormLabel size='sm'
color={colorMode === 'dark' ? 'black' : 'black'}
>Password</FormLabel>
<Button
as='a'
href='#'
variant='link'
size='xs'
color='#0969da'
fontWeight='500'
>
Forgot password?
</Button>
</HStack>
<Input
type='password'
bg='white'
borderColor='#d8dee4'
size='sm'
borderRadius='6px'
color={colorMode === 'dark' ? 'black' : 'black'}
value={password}
/>
</FormControl>
<Button
type="submit"
bg='#2da44e'
color='white'
size='sm'
_hover={{ bg: '#2c974b' }}
_active={{ bg: '#298e46' }}
>
Sign in
</Button>
</Stack>
</form>
</CardBody>
</Card>
로그인 및 테마토글러 컴포넌트를 모두 통합하여 App.jsx 파일을 수정하세요.
import React from 'react'
import Login from './components/login'
import ThemeToggler from './components/ThemeToggler'
export default function App() {
return (
<div>
<ThemeToggler />
<Login />
</div>
)
}
우수, 개발 서버를 시작하면 프로젝트에 대한 모든 수정 사항을 쉽게 통합할 수 있습니다.
npm run dev
웹 브라우저에서 웹페이지를 로드하면 기본적으로 라이트 모드 테마가 표시됩니다.
테마 모드 섹션에 있는 ‘테마 아이콘 토글’ 버튼을 클릭하여 원하는 테마를 선택하세요.
React Hook을 이용한 폼 상태 관리
로그인 폼에 기능을 불어넣기 위해서는 먼저 React Hook을 활용한 상태 관리 메커니즘을 도입해야 합니다. 현재 양식은 두 개의 데이터 입력 필드와 액션 버튼으로만 구성되어 있습니다.
로그인 기능은 “Login”이라는 이름의 React 컴포넌트 안에 정의되어 있습니다. 이 컴포넌트에는 사용자 이름과 비밀번호와 같은 사용자 자격 증명을 저장하기 위한 상태 변수와 사용자가 로그인 버튼을 클릭할 때 양식 제출을 처리하는 함수가 포함되어 있을 수 있습니다. 또한 이 컴포넌트에는 저장된 자격 증명을 기반으로 사용자가 로그인했는지 여부를 판단하는 조건부 로직이 있을 수 있습니다.
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [success, setSuccess] = useState('');
const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false);
그런 다음 입력 요소에 대한 변경 사항을 모니터링하고, 이러한 변경 사항을 등록하고, 그에 따라 이메일 및 비밀번호 상태를 조정하는 이벤트 핸들러 기능을 통합합니다.
onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}
이제 수정된 코드가 사용자 입력 데이터를 성공적으로 캡처합니다.
차크라 UI의 내장 기능으로 양식 유효성 검사 및 오류 처리 구현
아래 제공된 코드 스니펫을 통합하여 JavaScript/HTML 형식의 레이블이 연결된 입력 필드를 생성합니다:
<form onSubmit={handleSubmit}>
`handleSubmit` 함수는 다음과 같이 정의할 수 있습니다: ”’자바스크립트 const handleSubmit = (event) => { event.preventDefault(); // 기본 양식 제출 동작 방지 if (!formIsValid()) { // 제출하기 전에 양식이 유효한지 확인합니다. return; // 양식이 유효하지 않으면 조기 종료 } submitForm(data); // 처리를 위해 서버에 데이터 제출 }; “`
const handleSubmit = async event => {
event.preventDefault();
setIsLoading(true);
try {
await userLogin({ email, password });
setSuccess('Logged in successfully!');
setIsLoading(false);
setIsLoggedIn(true);
} catch (error) {
setError('Invalid username or password!');
setIsLoading(false);
setEmail('');
setPassword('');
}
};
사용자가 양식을 제출할 때마다 비동기 `handleSubmit` 함수가 활성화됩니다. 이 함수는 ‘로딩 중’ 상태를 활성화하여 처리가 진행 중임을 나타냅니다. 사용자 경험을 향상시키기 위해 이 기간 동안 차크라 UI의 로딩 스피너를 표시할 수 있습니다.
또한 핸들 제출 함수를 호출하면 이러한 자격 증명의 유효성을 검사하기 위해 이메일 주소와 비밀번호를 입력으로 받아들이는 userLogin 함수가 호출됩니다.
인증 API 요청 시뮬레이션
사용자가 제출한 입력 데이터의 적법성을 보장하기 위해 userLogin 함수의 구현을 통해 API 요청을 하는 과정을 복제할 수 있습니다.이 함수는 일반적인 백엔드 서버가 따르는 프로토콜에 따라 로그인 정보의 진위 여부를 평가합니다.
React 애플리케이션의 `App` 컴포넌트의 `handleSubmit` 함수 아래에 HTML과 CSS를 사용하는 새 코드 줄을 추가하여 사용자가 레스토랑 예약 가능 여부를 볼 수 있는 원하는 시간대를 선택할 수 있는 드롭다운 버튼을 만들 수 있습니다. 이렇게 하면 사용자가 “내일”, “금요일” 또는 “토요일” 중에서 선택할 수 있습니다. 또한 다른 드롭다운 메뉴를 사용하여 선택한 날짜를 지울 수 있는 옵션도 제공해야 합니다.
const userLogin = async ({ email, password }) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (email === '[email protected]' && password === 'password') {
resolve();
} else {
reject();
}
}, 1000);
});
};
본 코드는 논리적 검증의 초보적인 연습을 포함하는 비동기 연산을 구성합니다.
차크라의 오류 처리 UI 기능.
양식과의 사용자 상호 작용을 고려할 때, 차크라의 UI 라이브러리 피드백 컴포넌트를 통해 시각적 단서를 효과적으로 전달할 수 있습니다. 처음에는 차크라의 광범위한 UI 요소 컬렉션에서 이러한 구성 요소를 가져옵니다.
Alert, AlertIcon, AlertTitle, CircularProgress
{error && !isLoggedIn &&
<Alert status='error' variant='solid'>
<AlertIcon />
<AlertTitle>{error}</AlertTitle>
</Alert>
}
{isLoggedIn && (
<Alert status="success" variant='solid'>
<AlertIcon />
<AlertTitle>{success}</AlertTitle>
</Alert>
)}
마지막으로 CircularProgress 컴포넌트를 통합하여 제출 버튼을 수정합니다.
{isLoading
? (<CircularProgress isIndeterminate size="24px" color="teal" />)
: ('Sign In')}
로그인에 성공하면 사용자에게 다음과 같은 보기가 표시됩니다:
인증 절차 중 실수가 있는 경우 사용자는 다음과 유사한 메시지를 받게 됩니다:
차크라 UI로 개발 프로세스 개선
차크라 UI는 정교하게 제작되고 개인화 가능한 사용자 인터페이스 요소의 배열을 제공하여 React 인터페이스의 빠른 개발을 용이하게 합니다. 컴포넌트의 범위는 기본적인 디자인 요구사항부터 복잡한 디자인 요구사항까지 모두 포함하며, 상상할 수 있는 거의 모든 UI 작업에 대한 솔루션을 제공합니다.