React에서 React Hook Form과 Context API로 전역 폼 상태 관리

// FormContext.js

import React, { createContext, useContext } from 'react';
import { useForm, FormProvider } from 'react-hook-form';

const FormContext = createContext();

export const FormProviderComponent = ({ children }) => {
  const methods = useForm();
  return (
    <FormContext.Provider value={methods}>
      <FormProvider {...methods}>{children}</FormProvider>
    </FormContext.Provider>
  );
};

export const useFormContext = () => useContext(FormContext);

 

 

// Form.js

import React from 'react';
import { useFormContext } from './FormContext';

const FormInput = ({ name, label }) => {
  const { register, formState: { errors } } = useFormContext();

  return (
    <div>
      <label>{label}</label>
      <input {...register(name, { required: `${label}을 입력하세요.` })} />
      {errors[name] && <p>{errors[name].message}</p>}
    </div>
  );
};

export default function Form() {
  const { handleSubmit } = useFormContext();

  const onSubmit = (data) => {
    console.log('폼 데이터:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <FormInput name="name" label="이름" />
      <FormInput name="email" label="이메일" />
      <button type="submit">제출</button>
    </form>
  );
}

 

 

 

// App.js

import React from 'react';
import { FormProviderComponent } from './FormContext';
import Form from './Form';

function App() {
  return (
    <FormProviderComponent>
      <Form />
    </FormProviderComponent>
  );
}

export default App;

// React Hook Form과 Context API를 결합하면 복잡한 폼 상태 관리를 간소화할 수 있음