[Error] 타입스크립트 라우터 오류 'Page'은(는) JSX 구성 요소로 사용할 수 없습니다. 해당 반환 형식 'Promise<Element>'은(는) 유효한 JSX 요소가 아닙니다. Promise값 리스트로 변환하기

오류내용

'Page'은(는) JSX 구성 요소로 사용할 수 없습니다.  해당 반환 형식 'Promise<Element>'은(는) 유효한 JSX 요소가 아닙니다.    'Promise<Element>' 형식에 'ReactElement<any, any>' 형식의 type, props, key 속성이 없습니다.

타입스크립트 라우터에서 발생하는 오류메세지이다.

 

트러블 슈팅 순서

1. 문제 정의
2. 사실 수집
3. 원인 추론
4. 조치 및 방안 검토
5. 결과관찰
6. (만약 문제가 다시발생한다면 4번으로 다시)

 

1.  문제 정의

난 이 페이지에서 자바스크립트처럼 비동기 async / await를 쓰고 싶어서 아래 이미지 처럼 async 키워드를 써주면

Router페이지에서 이렇게 오류가 빵빵 터진다.

 

2. 사실 수집

오류 메세지를 잘 살펴보자.
'DashboardPage'은(는) JSX 구성 요소로 사용할 수 없습니다.  해당 반환 형식 'Promise'은(는) 유효한 JSX 요소가 아닙니다.    'Promise' 형식에 'ReactElement<any, any="">' 형식의 type, props, key 속성이 없습니다.</any,>

이 오류는 내가 해석하기로는 Route 함수의 element 속성에는 JSX 형식이 와야하는데
async로 선언해버리는 Promise 객체가 반환이 되므로 형식에 안맞아서 사용할 수 없다는 뜻 같다.

 

3. 원인 추론

그렇다면 원인은 Promise 객체를 반환하기 때문이고 async 선언을 페이지 함수 최상단에서 쓰면 안되는 것 같다.
그럼 타입스크립트에서는 비동기 함수를 못쓰냐???
그건 아니겠지...

 

4. 조치 및 방안 검토

1) 내가 async/await 키워드가 필요한 부분을 살펴보았다.
    파이어베이스에서 데이터를 불러오는 getDoc() 함수에서 사용해야 했다.
2) async/await 키워드가 필요한 부분만 별도 함수로 만들어주기

3) 해당 함수를 만들어주고 결과값 확인해보기

난 여기있는 [[PromiseResult]]가 필요하다...!!

4) 저 PromiseResult를 object 배열로 빼올 수 있는 방법이 없을까??

5) 갓챠..!

[javascript] promise의 값 가져오기

6) 해결방벙 적용

 

5. 결과관찰

필요한 데이터를 얻었다..!

이제 필요한 곳에서 object처럼 사용하면 된다!

 

 

++

근데 이상하게 useState에서 object[] 또는 object로 형식지정하면 오류가 난다... 이건 머누