React Hook Form – 폼 내용은 유지한 채로 “isDirty” 초기화하기?
React Hook Form 라이브러리를 사용하다보면, 폼의 내용은 유지한 채로 “isDirty” 상태를 초기화해야 하는 상황이 발생할 수 있습니다. 이 블로그 글에서는 이러한 동작을 달성하기 위한 다양한 접근 방법에 대해 알아보겠습니다.
해결책 1: 값을 사용하여 초기화하기
React Hook Form이 제공하는 reset 함수를 사용하여 폼 데이터가 손실되지 않고 “isDirty” 상태를 초기화할 수 있습니다. 제출 핸들러에서 현재 폼 값들을 reset 함수의 인자로 전달할 수 있습니다. 다음과 같이 사용할 수 있습니다:
const { reset, handleSubmit, formState } = useForm();
const { isDirty } = formState;
const handleFormSubmit = (values) => {
// 폼 데이터를 제출하는 코드
fetch('google.com')
.then(response => console.log('response', response))
.finally(() => reset(values));
}
위의 예제에서 reset(values) 호출은 현재 폼 값을 사용하여 폼을 초기화하고, “isDirty” 상태를 지웁니다. 이렇게 하면 사용자가 다시 입력하기 시작할 때 오류 메시지나 로그인 실패 시도 표시를 제거할 수 있습니다.
해결책 2: useEffect() 사용하기
다른 접근 방법으로는 useEffect() 훅을 사용하여 성공적인 폼 제출 후에 “isDirty” 상태를 초기화하는 방법이 있습니다. 그러나 useEffect()는 특정 시나리오에서 여러 번 실행될 수 있으므로 이 특정 사용 사례에는 권장되지 않습니다.
const { reset, formState: { isSubmitSuccessful } } = useForm();
React.useEffect(() => {
if (isSubmitSuccessful) {
reset({}, { keepValues: true });
}
}, [isSubmitSuccessful, reset]);
위의 코드 조각에서 우리는 formState의 isSubmitSuccessful을 사용하여 폼 제출이 성공했는지 결정합니다. 만약 true이면, reset({}, { keepValues: true })를 사용하여 현재 값을 유지한 상태에서 폼을 초기화합니다.
해결책 3: “isDirty” 상태 명시적으로 초기화하기
폼의 값이나 기본 값에 간섭하지 않고 “isDirty” 상태를 초기화하려면 다음 접근 방법을 사용할 수 있습니다:
const { reset, formState: { isDirty } } = useForm({
defaultValues: {
// 필요한 경우 기본 값 지정
}
});
// "isDirty" 상태 초기화
reset(undefined, { keepValues: true, keepDirty: false, keepDefaultValues: false });
위의 예제에서 reset(undefined, { keepValues: true, keepDirty: false, keepDefaultValues: false })를 사용하여 명시적으로 “isDirty” 상태를 초기화하면서 폼 값은 유지하고 원치 않는 동작을 방지할 수 있습니다.
결론
React Hook Form을 사용하여 “isDirty” 상태를 폼 내용을 유지한 채로 초기화하는 것은 여러 가지 방법으로 달성할 수 있습니다. 값과 함께 초기화하는지, useEffect() 훅을 사용하는지, 아니면 “isDirty” 상태를 명시적으로 초기화하는지 선택할 수 있습니다. 이제 이 시나리오를 효과적으로 처리할 수 있는 방법을 알고 있습니다.
특정 요구 사항을 고려하고 필요에 가장 적합한 해결책을 선택하세요. React Hook Form은 강력한 도구를 제공하여 견고한 폼을 구축하는데 도움이 되며, “isDirty” 상태를 초기화하는 방법을 이해하는 것은 폼 동작을 최적화하는 한 가지 측면입니다.
