React-hook-form에서 Cannot read properties of undefined 해결하기

React-hook-form을 통한 예외처리

여러 개의 input tag를 사용하여 컴포넌트를 만들 때에는 보통 react-hook-form을 통해 예외처리를 합니다.

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

const { register, handleSubmit } = useForm();

return (
    <form onSubmit={handleSubmit(onValid, inValid)}>
        <input
            placeholder='이름을 입력해주세요.'
            {...register('name', {
                required: '이름은 필수 입력입니다.',
                maxLength: 12,
            })}
        />
        <input
            placeholder='설명을 입력해주세요.'
            {...register('desc', {
                required: '설명은 필수 입력입니다.',
            })}
        />
    </form>
);

위의 코드에서 만약 사용자가 이름을 12자 이상 작성했다면

const onValid = (data) => {
    //do something
};

const inValid = (e) => {
    const name = e.name;

     if (name.type === 'maxLength') {
         console.log('이름은 최대 12자 입니다.');
     }
};

위처럼 어떤 조건이 불충족됐는지 확인하여 예외처리가 가능합니다.

야기되는 문제점

하지만 위의 코드는 종종 'type'에 접근하려고 할 때 다음과 같은 오류가 발생 할 수 있다는 문제가 있습니다.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type')

위의 Cannot read properties of undefined (reading 'type') 에러는

변수 name이 정의되지 않은 상태에서 속성 'type'에 접근하려고 할 때 발생하는 오류입니다.

 

이 오류는 e.name이 undefined인 경우에 발생할 수 있습니다.

 

그렇다면 이러한 문제는 어떻게 해결해야 할까요?

 

이러한 경우에는 Optional chaining을 사용하여 undefind 에러를 방지하고 조건문에서 변수의 존재 유무를 확인하여 에러를 해결해야 합니다.

 

다음은 위의 문제를 해결한 코드입니다.

const inValid = (e) => {
    const name = e?.name;

     if (name && name.type === 'maxLength') {
         console.log('이름은 최대 12자 입니다.');
     }
};