React - 타입스크립트 실행오류 Type 'undefined' is not assignable to type

 

리액트에서 타입스크립트를 사용하다가 에러가 났다. 

강의만 들어봤고, 처음 사용해보았던 터라 당황했지만 차근차근 해결해 나갔다.

처음에는 타입스크립트만 쓰지 않았더라면 이런 고생을 하지 않고 진작에 개발이 끝났을 텐데 하는 

불평도 많이 들었다. 그렇지만 쓰다 보니 변수 관리가 훨씬 잘된다는 사실을 깨달았다. 

 

그리고 이 포스팅은 내가 겪은 이슈들의 기록이다.  언젠가는 쌓이겠지 휴 ...

(Updated 02/21/22)

오랜만에 예전에 쓴 포스팅을 봤는데 추가할 부분이 있어 수정해보았다.

아직도 부족하다고 생각하지만 몇 개월전의 나를 보니 정말 쌓이긴 하는 것 같다.

 

---

React - 타입스크립트 실행오류 Type 'undefined' is not assignable to type 

 

props 를 넘겨주다 발생한 에러 메시지이다. 

Type ' | undefined' is not assignable to type ''.
Type 'undefined' is not assignable to type ''.
The expected type comes from property '' which is declared here on type
→ 타입으로 undefined 를 넣을 수가 없다는 말이다. 이 에러는 undefined 에 대한 처리를 해주지 않아 난다.
 
Uncaught Error: Objects are not valid as a React child (found: object with keys)
→ 이 에러는 주로 map()으로 자식 컴포넌트를 렌더링할 때, Unique 해서 식별할 수 있는 키가 없으면 나게 된다.

Error : object is possibly undefined
→ 데이터가 항상 값이 있는게 아닌 경우에 따라 텅 빈 undefined 상태일 수 있을 때 나는 에러다.

 

자, 그럼 해결한 예제들을 살펴보자.  

 

CASE 1)

부모컴포넌트 Deal.tsx

부모컴포넌트 Deal 에서 → 자식 컴포넌트 DealTest 으로

데이터(props)를 택배보내려고 하는데 맘같지 않게 빨간 에러가 뜬다.

 

자세히 살펴보니 deal 로 = {dealItem} 의 내용을 넘길 때, 타입 스크립트는 외치고 있다.

 

"개발자님ㅠㅠ 자식한테 보내는 데이터가 undefined 인데요

왜 이건 생각안합니까?? 우리가 정한 타입에는 undefined 가 없다구욧!

고칠 때까지 못 보냇!!"

 

그렇다. 이 에러는 자식 컴포넌트에서 props로 받는 데이터에(만) 문제가 있다는 뜻이기도 하다.

 

자식컴포넌트 DealTest.tsx

위에서 에러가 뜬 이유는 deal 이 부모의 데이터를 받아오는 연결 다리같은 변수여서 부모의 데이터 타입과 무조건 일치해야해야한다. (하지만 초보 새발자는 그렇지 않았지)

 

마치 인터스텔라에서 시공간을 초월해서 부모 자식이 같은 물건을 주고 받듯이

얘네들도 타입스크립트를 통해 같은 타입의 데이터를 주고 받을 수 있는 것이다.

 

이렇게 해결하자 !

1. interface 로 부모에게 넘겨받은 props 데이터의 타입을 정의해준다.

2. 컴포넌트의 매개변수 props 를 interface 로 정의해준 타입으로 넘겨주자.

 

깔끔하게 해결되었다.

 

 

CASE 2)

첫번째 빨간줄을 보면 dealItem 이라는 객체는 항상 값을 가지고 있는 데이터 타입 Deal 만 설정해줘서 에러가 났다.

빈 값 설정도 해줘야한다. 즉, null 이라는 초기값도 함께 설정해줘야 한다.

dealItem 이라는 객체를 useState의 타입에서  Deal | null 로 설정해 주었더니 에러가 사라졌다.

 

CASE 3)

두번째 빨간줄 에서 만약 dealItem 이 null 처리를 안해줬는데 텅 비어있다면,

getNick() 에서 예외처리없이 undefined 이면 에러를 뱉기 때문에 삼항 연산자로 공백처리를 해주면 사라진다.

 

CASE 4)

onClick 함수의 매개변수로 객체를 넣으려하니 빨간 에러가 떠버렸다. 

아까와 마찬가지로 null 처리를 해주지 않았기 때문이다.

 

null 이라는 초기값을 설정해주자. 그리고 if문으로 deal 객체가 텅 비었을 때의 예외처리도 해주자. 

 

 

Hoxy 저의 미흡한 포스팅이 도움이 되셨다면..? 5랜시간을 해메이다 해결에 도움이 되셨다면..?

광고한번만 눌러주시면 힘내서 더 열심히 포스팅하겠습니다! 감사합니다. (🙇‍♀️꾸벅) -새발자올림-