MUI라고도 하는 머티리얼 UI는 구글의 머티리얼 디자인 프레임워크의 구현을 포괄하는 요소 모음으로 높이 평가받고 있습니다. 이 포괄적인 조립식 사용자 인터페이스 컴포넌트 세트는 실용적이고 미학적으로 만족스러운 인터페이스를 쉽게 구축할 수 있는 다양한 옵션을 제공합니다.

원래는 React와 함께 사용하기 위한 것이지만, 이 툴셋은 Next.js와 같은 광범위한 React 에코시스템 내에 존재하는 추가 프레임워크를 통합하도록 확장될 수 있습니다.

React Hook 폼 및 머티리얼 UI 시작하기

React Hook 폼 는 폼을 생성, 관리, 검증하는 간단하고 선언적인 방법을 제공하는 인기 있는 라이브러리입니다.

Material UI의 UI 컴포넌트 및 스타일을 통합하여 사용하기 쉬운 멋진 양식을 만들고 Next.js 애플리케이션에 일관된 디자인을 적용할 수 있습니다.

프로세스를 시작하려면 App 디렉터리를 활용하는 스캐폴딩 기법을 사용하여 Next.js 프로젝트의 로컬 인스턴스를 만들어야 합니다. 명확성과 이해를 돕기 위해 데모에서는 가장 최신 버전의 Next.js를 사용합니다.

 npx create-next-app@latest next-project --app 

Rasa 설치를 설정하고 새 프로젝트를 생성한 후에는 해당 프로젝트 내에 추가 라이브러리를 통합해야 합니다. 이렇게 하려면 프로젝트가 있는 디렉토리로 이동하여 `pip install ` 명령을 실행합니다. 그러면 선택한 패키지가 프로젝트 환경 내에 다운로드되고 설치됩니다.

 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과 Material-UI의 기능을 활용하려면 다음과 같이 임포트해야 합니다: ”’자바스크립트 ‘react-hook-form’에서 { useForm }을 임포트합니다; ‘@material-ui/core’에서 { TextField, Button, Container, Box }를 가져옵니다;

 "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)는 미리 구성된 사용자 인터페이스 요소 배열을 제공하며, 스타일 프로퍼티를 적용하여 특정 기본 설정에 맞게 조정할 수 있습니다.

스타일 접근 방식을 활용하면 사용자 인터페이스 측면을 더 많이 사용자 정의하고 조작할 수 있지만, 기본 둘러싸기, 양식 자체 및 개별 텍스트 입력 필드와 같은 양식의 주요 구성 요소의 모양을 향상하기 위해 CSS 속성을 사용할 수도 있습니다.

Python 스크립트의 가져오기 문 아래에 다음 코드 줄을 포함해야 합니다:

 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>
    </>
  );
} 

기본 Next.js 코드를 삭제하고 후속 콘텐츠로 대체하여 애플리케이션의 page.js 파일 내에 앞서 언급한 요소를 통합합니다:

 import Form from 'src/components/Form'

export default function Home() {
  return (
    <main >
      <Form />
    </main>
  )
} 

적절한 인터페이스 또는 명령줄 도구를 활용하여 개발 서버 생성 프로세스를 시작하면 선호하는 웹 브라우징 애플리케이션 내에 두 개의 텍스트 기반 입력 필드와 ‘제출’ 작업 버튼이 포함된 기본 사용자 인터페이스가 생성됩니다.

양식 유효성 검사 처리

레이아웃의 미학은 인상적이지만 이 시점에서는 기능이 부족합니다. 제대로 작동하려면 유효성 검사 로직을 통합해야 합니다.사용자 입력 데이터를 처리하고 검증할 때 ‘useForm’ 훅을 활용하면 유리할 수 있습니다.

다음은 React 함수형 컴포넌트에서 상태 변수를 정의하고 사용하는 방법에 대한 예시입니다: ”’자바스크립트 ‘react’에서 { useState }를 가져옵니다; 함수 MyForm() { const [formStatus, setFormStatus] = useState(‘initial’); // 기본값으로 상태 초기화 const handleLogin = (username, password) => { // 사용자 이름과 비밀번호가 유효한지 확인합니다. // 유효하다면 양식 상태를 “제출됨”으로 업데이트합니다. // 그렇지 않으면 “초기”로 유지 setFormStatus(‘submitted’); }; 반환 (

 const [formStatus, setFormStatus] = useState({ success: false, error: '' }); 

 const onSubmit = (data) => {
    if (data.username === 'testuser' && data.password === 'password123') {
        setFormStatus({ success: true, error: '' });
    } else {
        setFormStatus({ success: false, error: 'Invalid username or password' });
    }
}; 

 onClick={handleSubmit(onSubmit)} 

 {formStatus.success ? (
    <Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
    <Alert severity="error">{formStatus.error}</Alert>
) : null} 

 {...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'
    },
})} 

 {...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>}