Form Validation

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 React PairProgramming과제를 진행하며 회고를 정리하는 글이다.

 

1. 발견

구현해야 할 Form에 필요한 라이브러리들(react hook form,  zod, react router)의 사용법을 몰라 공부가 필요했다.

 

2. 현상

[react hook form]

https://react-hook-form.com

[useForm]

https://react-hook-form.com/api/useform

// SignIn.jsx
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';

// useForm 사용
const {
    handleSubmit,
    control,
    formState: { isValid },
  } = useForm({
    mode: 'onChange',
    resolver: zodResolver(validationSchema),
    defaultValues: {
      email: '',
      password: '',
    },
  });

  

[useController]

https://react-hook-form.com/api/usecontroller

// InputContainer.jsx
import { useController } from 'react-hook-form';

// useController 사용
const {
    field,
    fieldState: { isDirty, error },
  } = useController({
    name: id,
    control,
    defaultValue: {},
  });

   

[zod]

https://zod.dev

import { z } from 'zod';

const validationSchema = z
  .object({
    email: z.string().email({ message: '이메일 형식에 맞게 입력해주세요.' }),
    name: z.string().min(1, { message: '이름을 입력해 주세요.' }),
    password: z.string().regex(/^[A-Za-z0-9]{6,12}$/, { message: '영문 또는 숫자를 6~12자 입력하세요.' }),
    confirmPassword: z.string().regex(/^[A-Za-z0-9]{6,12}$/, { message: '패스워드가 일치하지 않습니다.' }),
  })
  .refine(data => data.password === data.confirmPassword, {
    message: '패스워드가 일치하지 않습니다.',
    path: ['confirmPassword'],
  });

[react router]

https://reactrouter.com/en/main

// main.jsx
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

// router 사용
const router = createBrowserRouter([
  {
    path: '/',
    element: <SignIn />,
  },
  {
    path: '/SignUp',
    element: <SignUp />,
  },

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RecoilRoot>
      <GlobalStyle />
      <RouterProvider router={router} />
    </RecoilRoot>
  </React.StrictMode>
);

위의 공식 홈페이지에서 문서를 참고하여 문제를 해결하였다.

   

 

3. 배운점

- 라이브러리를 사용하면 구현이 편리한 점이 많았지만, 라이브러리 자체를 공부하고 원하는 기능을 구현하기 위해 문서를 탐색하는 과정이 쉽지 않았고 이 작업을 여러 번 반복하다 보니 시간이 필요했다.

- 라이브러리를 능숙하게 사용하려면 연습이 많이 필요하다고 느꼈다.

- 결론적으로 배운 점은 라이브러리에 대한 사용 경험과 라이브러리 사용법 자체다.

 

4. 선언

- react를 사용하여 어플리케이션을 만들 때 필요한 라이브러리를 적극 사용해야겠다.

- 많이 사용되는 라이브러리를 능숙하게 다룰 수 있도록 연습해야겠다.

- 새로운 라이브러리를 공부하는데 적극적인 태도를 가져야겠다.