Material UI(MUI)는 구글의 머티리얼 디자인 시스템을 기반으로 한 널리 알려진 UI 컴포넌트 라이브러리입니다. 이 라이브러리는 기능적이고 시각적으로 뛰어난 인터페이스를 구축하는 데 필요한 다양한 UI 요소를 제공합니다.
React 환경을 위해 설계되었지만, Next.js와 같은 React 기반 프레임워크에서도 원활하게 사용할 수 있습니다.
React Hook Form 및 Material UI를 활용한 개발 시작
React Hook Form은 양식 생성, 관리, 그리고 유효성 검증을 위한 간결하고 선언적인 방법을 제공하는 인기 있는 라이브러리입니다.
이 라이브러리와 Material UI의 UI 컴포넌트 및 스타일을 결합하면, 사용자 친화적이고 멋진 양식을 만들 수 있으며 Next.js 애플리케이션에 일관된 디자인을 적용할 수 있습니다.
시작하려면, 로컬 환경에 Next.js 프로젝트를 생성하십시오. 본 가이드에서는 App 디렉토리를 사용하는 최신 버전의 Next.js를 기준으로 설명합니다.
npx create-next-app@latest next-project --app
다음으로, 프로젝트에 필요한 패키지들을 설치합니다.
npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled
완성될 양식의 미리보기는 다음과 같습니다.
이 프로젝트의 전체 코드는 다음 GitHub 저장소에서 확인할 수 있습니다.
양식 생성 및 스타일 적용
React Hook Form은 `useForm` 훅을 포함하여 다양한 기능을 제공합니다.
이 훅은 양식 상태 관리, 입력 값 유효성 검사, 제출 처리 등 양식 관리의 핵심 부분을 간소화합니다.
이 훅을 사용하는 양식을 만들기 위해, `src/components/form.js` 파일을 생성하고 다음 코드를 추가합니다.
먼저, React Hook Form 및 MUI 패키지에서 필요한 모듈들을 가져옵니다.
"use client"
import React, {useState} from 'react';
import { useForm } from 'react-hook-form';
import { TextField, Button as MuiButton, Alert } from '@mui/material';
import { styled } from '@mui/system';
MUI는 추가적인 커스터마이징이 가능한 다양한 UI 컴포넌트를 제공합니다.
만약 UI 디자인에 더 많은 유연성과 제어를 원한다면, CSS 속성을 사용하여 UI 요소의 스타일을 지정하는 스타일링 방법을 사용할 수 있습니다. 여기서는 양식의 기본 컨테이너, 양식 자체, 그리고 입력 텍스트 필드의 스타일을 지정할 수 있습니다.
가져오기 구문 아래에 다음 코드를 추가하십시오.
const FormContainer = styled('div')({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
});const StyledForm = styled('form')({
width: '80%',
maxWidth: '400px',
padding: '20px',
borderRadius: '10px',
border: '2px solid #1E3A8A',
boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.2)',
backgroundColor: '#ffffff',
textAlign: 'center',
});
const StyledTextField = styled(TextField)({
marginBottom: '16px',
width: '100%',
});
개발 과정에서는 모듈화된 코드 구조를 유지하는 것이 중요합니다. 따라서 모든 코드를 하나의 파일에 통합하는 대신, 사용자 정의 컴포넌트를 별도의 파일에 정의하고 스타일을 적용하는 것이 좋습니다.
이렇게 하면 애플리케이션의 여러 부분에서 해당 컴포넌트를 쉽게 재사용할 수 있으며, 코드를 더 체계적이고 유지보수하기 용이하게 만들 수 있습니다.
이제 기능적인 컴포넌트를 정의합니다.
export default function Form() {
const { register, handleSubmit, formState: { errors } } = useForm();
return (
<>
<FormContainer>
<StyledForm>
<StyledTextField
label="Username"
type="text"
/>
<StyledTextField
label="Password"
type="password"
/>
<MuiButton
type="submit"
variant="contained"
color="primary"
margin="5px"
> Submit </MuiButton>
</StyledForm>
</FormContainer>
</>
);
}
마지막으로 `app/page.js` 파일에서 이 컴포넌트를 불러와 사용합니다. 기존의 Next.js 코드를 모두 삭제하고 다음 코드로 교체하십시오.
import Form from 'src/components/Form'export default function Home() {
return (
<main >
<Form />
</main>
)
}
개발 서버를 시작하면, 두 개의 입력 필드와 제출 버튼이 있는 기본적인 양식이 브라우저에 표시됩니다.
양식 유효성 검사 처리
양식은 보기에는 좋지만, 아직 아무런 기능도 수행하지 않습니다. 양식이 동작하도록 몇 가지 유효성 검사 코드를 추가해야 합니다. `useForm` 훅의 다양한 기능은 사용자 입력 값을 관리하고 유효성을 검사하는 데 유용합니다.
먼저, 사용자가 유효한 자격 증명을 입력했는지 여부에 따라 양식의 현재 상태를 관리하기 위해 다음 상태 변수를 정의합니다. 기능 컴포넌트 내에 다음 코드를 추가합니다.
const [formStatus, setFormStatus] = useState({ success: false, error: '' });
다음으로, 자격 증명을 검증하는 핸들러 함수를 생성합니다. 이 함수는 클라이언트 앱이 백엔드 인증 API와 통신할 때 일반적으로 발생하는 HTTP API 요청을 시뮬레이션합니다.
const onSubmit = (data) => {
if (data.username === 'testuser' && data.password === 'password123') {
setFormStatus({ success: true, error: '' });
} else {
setFormStatus({ success: false, error: 'Invalid username or password' });
}
};
사용자가 제출 버튼을 클릭했을 때 `onSubmit` 함수를 실행하기 위해, 버튼 컴포넌트에 `onClick` 이벤트 핸들러 함수를 추가하고 이를 prop으로 전달합니다.
onClick={handleSubmit(onSubmit)}
`formStatus` 상태 변수의 값은 사용자에게 피드백을 제공하는 방법을 결정하므로 중요합니다. 사용자가 유효한 자격 증명을 입력하면 성공 메시지를 표시할 수 있습니다. Next.js 애플리케이션 내에 다른 페이지가 있는 경우 해당 페이지로 리디렉션할 수도 있습니다.
또한, 자격 증명이 유효하지 않은 경우에도 적절한 피드백을 제공해야 합니다. Material UI는 `formStatus` 값을 기반으로 사용자에게 알림을 표시하기 위해 React의 조건부 렌더링 기술과 함께 사용할 수 있는 다양한 피드백 컴포넌트를 제공합니다.
이를 위해 `StyledForm` 여는 태그 바로 아래에 다음 코드를 추가합니다.
{formStatus.success ? (
<Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
<Alert severity="error">{formStatus.error}</Alert>
) : null}
이제 사용자 입력을 캡처하고 유효성을 검사하기 위해 `register` 기능을 사용하여 양식 입력 필드를 등록하고, 해당 값을 추적하고, 유효성 검사 규칙을 설정할 수 있습니다.
이 함수는 입력 필드의 이름과 유효성 검사 매개변수 객체를 포함하여 여러 인수를 받습니다. 이 객체는 특정 패턴, 최소 길이 등 입력 필드에 대한 유효성 검사 규칙을 지정합니다.
사용자 이름 `StyledTextField` 컴포넌트에 다음 코드를 prop으로 추가하십시오.
{...register('username', {
required: 'Username required',
pattern: {
value: /^[a-zA-Z0-9_.-]*$/,
message: 'Invalid characters used'
},
minLength: {
value: 6,
message: 'Username must be at least 6 characters'
},
})}
비밀번호 `StyledTextField` 컴포넌트에 다음 객체를 prop으로 추가합니다.
{...register('password', {
required: 'Password required',
minLength: {
value: 8,
message: 'Password must be at least 8 characters'
},
})}
사용자 이름 입력 필드 아래에 다음 코드를 추가하여 입력 요구 사항에 대한 시각적인 피드백을 제공합니다.
이 코드는 사용자에게 요구 사항을 알리고 양식을 제출하기 전에 오류가 수정되었는지 확인할 수 있도록 오류 메시지와 함께 경고를 표시합니다.
{errors.username && <Alert severity="error">{errors.username.message}</Alert>}
마지막으로 비밀번호 입력 텍스트 필드 바로 아래에 유사한 코드를 추가합니다.
{errors.password && <Alert severity="error">{errors.password.message}</Alert>}
훌륭합니다! 이 변경 사항들을 통해 React Hook Form과 Material UI를 사용하여 시각적으로 매력적이고 기능적인 양식을 만들 수 있게 되었습니다.
클라이언트 측 라이브러리를 활용하여 Next.js 개발 향상
Material UI와 React Hook Form은 Next.js 프론트엔드 개발 속도를 향상시키는 데 사용할 수 있는 수많은 훌륭한 클라이언트 측 라이브러리의 일부일 뿐입니다.
클라이언트 측 라이브러리는 보다 빠르고 효율적으로 개선된 프론트엔드 애플리케이션을 구축하는 데 도움이 될 수 있는 다양한 프로덕션 지원 기능과 미리 구축된 컴포넌트를 제공합니다.