react-hook-form & 타입스크립트) errors.id?.message?.toString()

0. 글을 쓴 이유(문제 원인)

react-hook-form 라이브러리와 타입스크립트를 적용해서 아래와 같은 회원가입 창을 만드는 중이었다.

입력값이 내가 설정한 정규표현식에 안맞을 경우, 아래와 같이  에러 메세지를 띄우기로 했다. 

 

하지만, 아래와 같이 타입스크립트 에러가 났다. 

에러메세지 : React 컴포넌트에서 전달된 props의 타입이 일치하지 않을 때 발생한다. 

라는 스타일 컴포넌트 안에는 같은 종류의 타입인 ReactNode가 들어가야한다. 

하지만, errors 는 FieldErrors<FieldValues> 타입이다. 

 

FieldError와 ReactNode와 타입이 일치하지 않아서 생긴 오류다. 

 

FieldError는 react-hook-form 에서 생성된 오브젝트이며, ReactNode는 React에서 렌더링 되는 모든 타입

(문자열,숫자, 불리언,배열,객체, 함수 등)을 포함하는 추상적인 타입이다. 따라서

FieldError 타입은 ReactNode와 호환되지 않기때문에 에러가 발생했다. 

1. 해결 방안

FieldError와 같은 타입을 ReactNode로 변환해주는 작업이 필요하다.
FieldError에서 message라는 속성을 추출하여 ReactNode로 전달하면 된다.

errors.id?.message?.toString() 으로 사용하면 된다.

저기서 ?. 물음표와 점이 뭘까?

 

✅옵셔널 체이닝

뜻 : 연산자는 객체 내부의 속성에 접근할 때 해당 속성이 null 또는 undefined인 경우에도 에러를 발생시키지 않고, 그대로 undefined를 반환합니다.

 

옵셔널 체이닝이 없었을때는 아래와 같은 에러가 발생했다. 

아래와 같이 빈 객체에 접근하려고 하면 에러가 난다. 

let user = {}; // 주소 정보가 없는 사용자

alert(user.address.street); // TypeError: Cannot read property 'street' of undefined

에러 발생을 안내기 위해서 && 연산자를 사용해서 undefined 로 나오게 했다. AND 로 연결하면 코드가 길어져

user 가 없으면 맨 처음이 undefined라서 뒤에 볼 필요도 없이 undefined가 나옴

let user = {}; // 주소 정보가 없는 사용자

alert( user && user.address && user.address.street ); // undefined, 에러가 발생하지 않습니다.

 

옵셔널 체이닝의 등장

?. 은 ?. 앞의 평가 대상이 undefined나 null 이면 평가를 멈추고 undefined를 반환한다.

let user = {}; // 주소 정보가 없는 사용자

alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다.

user가 null이나 undefined가 아니고 실제 값이 존재하는 경우엔 반드시 user.address 프로퍼티는 있어야 합니다. 그렇지 않으면 user?.address.street의 두 번째 점 연산자에서 에러가 발생합니다.

 

 

 

 

출처

https://ko.javascript.info/optional-chaining

옵셔널 체이닝 '?.'