TypeScript로 React Hook 폼 검증 미니 프로젝트 만들기

프론트엔드 개발에서 사용자 입력을 처리하는 것은 매우 중요한 작업입니다. React에서는 여러 가지 방법으로 폼을 구현할 수 있지만, TypeScript를 사용하여 더욱 견고하고 타입 안전한 폼 검증을 구현하는 방법에 대해 알아보겠습니다. 이번 포스팅에서는 간단한 미니 프로젝트를 통해 React Hook Form과 TypeScript를 활용한 폼 검증을 구현해보겠습니다.

프로젝트 세팅

우선 새로운 React 프로젝트를 생성하겠습니다. 터미널에서 아래의 명령어를 입력하여 Create React App을 사용해 TypeScript 템플릿으로 프로젝트를 시작합니다.

npx create-react-app my-form-app --template typescript
cd my-form-app

필요한 라이브러리인 react-hook-form과 @hookform/resolvers, yup를 설치합니다.

npm install react-hook-form @hookform/resolvers yup

폼 컴포넌트 만들기

이제 src 폴더 안에 Form.tsx라는 파일을 생성해 폼 컴포넌트를 작성하겠습니다. 아래는 간단한 사용자 등록 폼의 예제입니다.

// src/Form.tsx
import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

interface FormData {
  username: string;
  email: string;
  password: string;
}

const schema = yup.object().shape({
  username: yup.string().required('아이디는 필수입니다.'),
  email: yup.string().email('유효한 이메일을 입력하세요.').required('이메일은 필수입니다.'),
  password: yup.string().min(6, '비밀번호는 최소 6자리 이상이어야 합니다.').required('비밀번호는 필수입니다.'),
});

const Form: React.FC = () => {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: yupResolver(schema),
  });

  const onSubmit = (data: FormData) => {
    console.log(data);
    alert('폼이 제출되었습니다!');
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="username">아이디:</label>
        <input id="username" {...register('username')} />
        {errors.username && <p>{errors.username.message}</p>}
      </div>
      <div>
        <label htmlFor="email">이메일:</label>
        <input id="email" type="email" {...register('email')} />
        {errors.email && <p>{errors.email.message}</p>}
      </div>
      <div>
        <label htmlFor="password">비밀번호:</label>
        <input id="password" type="password" {...register('password')} />
        {errors.password && <p>{errors.password.message}</p>}
      </div>
      <button type="submit">제출</button>
    </form>
  );
};

export default Form;

App 컴포넌트에 통합하기

이제 Form 컴포넌트를 App.tsx에 불러와서 사용하겠습니다.

// src/App.tsx
import React from 'react';
import Form from './Form';

const App: React.FC = () => {
  return (
    <div>
      <h1>사용자 등록 폼</h1>
      <Form />
    </div>
  );
};

export default App;

코드 설명

1. Yup 스키마 정의: yup을 사용하여 입력 필드에 대한 규칙을 정의했습니다. 각 필드는 필수 항목이며, 이메일은 올바른 형식을 요구하고, 비밀번호는 최소 6자리를 요구합니다.
2. React Hook Form 사용: useForm 훅을 사용하여 폼 상태를 관리하고, handleSubmit을 사용하여 폼 제출 시 유효성 검사를 수행합니다.
3. 에러 메시지 출력: 각 입력 필드 아래에 에러 메시지를 표시하여 사용자에게 필요한 정보를 제공합니다.

마무리

이번 포스팅에서는 TypeScript와 React Hook Form을 사용하여 간단한 사용자 등록 폼을 만들고, yup을 통해 유효성 검사를 구현하는 방법을 알아보았습니다. 이와 같은 접근 방식을 통해 폼 검증을 간편하게 처리하고, 코드의 유지보수성을 높일 수 있습니다. 실제 프로젝트에서도 이러한 패턴을 활용하면 더욱 안전하고 확장 가능한 폼을 만들 수 있습니다. 다음 포스팅에서는 더 복잡한 폼 상태 관리나 다른 유효성 검증 라이브러리와의 연동에 대해 다뤄보겠습니다.