react-hook-form 로딩 화면 만들기

 

폼 제출 후 응답이 올 때까지 로딩 화면을 띄워보자.

 

🎈 기존 방식

보통 React에서 로딩 화면을 구현한다면 아래와 같은 방식일 것이다.

function LoginPage() {

    const [loading, setLoading] = useState(null);
    return (
        <div>
        {loading && <Loading />}
        </div>
    )
}

 

submit 버튼 클릭 ➡️ setLoading(true) ➡️ loading의 상태가 바뀌어 리렌더링 발생, 로딩 UI가 화면에 띄워짐

 

그러나 react-hook-form을 사용한 경우 해당 방식을 사용할 수 없다.

react-hook-form 사이트에 들어가보면, react-hook-form은 form 영역을 제외한 다른 영역의 re-render를 방지하는 기능을 제공한다고 적혀있다. 이때문에 handleSubmit에 등록한 함수 내에서 setLoading을 통해 상태를 변경해도, 리렌더링이 발생하지 않는다. 따라서 로딩 UI가 렌더링되지 않는다.

 

✅ formState - isSubmitting 활용하기

다행히 react-hook-form에서는 로딩화면을 구현할 수 있는 간편한 방법을 제공하고 있다.

formState를 활용하면 된다. formState는 말그대로 폼의 상태 정보가 저장되어 있는 객체다. 아래와 같은 정보들을 확인할 수 있다.

• isSubmitted
• isSubmitSuccessful
• isSubmitting
• isValid
• errors

react-hook-form formState 공식문서

useForm - FormState

자세한 내용은 공식 문서에서 확인하자.

 

무튼 이 중에서 우린 isSubmitting을 사용할 것이다.

handleSubmit에 등록한 form 전송 함수가 호출되면 값이 true가 된다. 해당 함수의 비동기 작업이 끝나고 응답을 받으면 false로 바뀐다. (공식 문서에는 true if the form is currently being submitted. false otherwise. 라고 되어 있다.)

 

따라서 이렇게 코드를 작성하면 된다.

function LoginPage() {
	const { register, handleSubmit, formState } = useForm();
    const { isSubmitting } = formState; // 비구조화 할당
    return (
        <div>
        {isSubmitting && <Loading />}
        </div>
    )
}

👍🏻 완성 화면

유용보스 react-hook-form