비즈 니스 로직이란?

ant design Form vs 내 Form

• 내 Form은 어디서든 못쓴다 ㅠㅠ

나만의 공구 컴포넌트가 있으면 어떨까?!

캡슐화

• 상태에 대한 로직이 캡슐화가 되어져 있다. Dialog.Trigger

Radix의 asChild props 참고… 어캐 내부 구현했누????

useForm과 useFormik을 대체할수 있게 중간에 adapter를 만든다.

• useCustomFormWithFormik : formik을 사용하는 커스텀 훅이고 return은 value, onChange,

import { useFormik } from 'formik';

const useCustomFormWithFormik = (initialValues, onSubmit) => {
  const formik = useFormik({
    initialValues: initialValues,
    onSubmit: onSubmit,
  });

  return {
    values: formik.values,
    handleChange: formik.handleChange,
    handleSubmit: formik.handleSubmit,
  };
};

export default useCustomFormWithFormik;

import { useForm } from 'react-hook-form';

const useCustomFormWithReactHookForm = (initialValues, onSubmit) => {
  const { register, handleSubmit, setValue } = useForm({
    defaultValues: initialValues
  });

  const handleChange = (event) => {
    setValue(event.target.name, event.target.value);
  };

  return {
    values: register,
    handleChange: handleChange,
    handleSubmit: () => handleSubmit(data => onSubmit(data)),
  };
};

export default useCustomFormWithReactHookForm;

• 이 2개는 어댑터로서의 역할이고, 이 커스텀 훅을 사용하는 실제 컴포넌트는 같은 것을 반환받아 사용한다.