리액트 TS 프롭스 전달, useSelector, PayloadAction 타입 지정

해결법 선요약

 

const Summary = ({ results }: { results: AnalyzedMessages[] }) => {

 

=> props를 { results }로 비구조화 할당, : { results: 타입 } 형식으로 타입을 지정해주어야 함

 

+++ useSelector로 불러온 state에 타입 지정하는 방법

 

  const results = useSelector((state: { analyzedMessageSlice: AnalyzedMessages }) => state.analyzedMessageSlice);

 

+++ PayloadAction 타입 지정하는 방법

 

    setAnalyzedMessages: (state, action: PayloadAction<AnalyzedMessages[]>) => {

 

+++ event 타입 지정하는 방법

 

  const handleChangeFile = (event: React.ChangeEvent<HTMLInputElement>) => {

 

=> React.이벤트선택<노드선택>

 

+++ filteredMessages.flat().filter(Boolean)

=> filter(Boolean)을 이용하여 null이나 ""와 같은 falsy한 값들을 제거

---

문제: 프롭스 전달할 때 타입 지정 에러

{ results : AnalyzedMessages[] } 이렇게 타입 지정을 했더니 GPT가 에러를 못 잡고 계속 다른 이상한 해결법을 알려줌

---

GPT한테 한 질문

위에서 하라는 대로 백만번째하고 있는데 똑같은 에러에 똑같은 질문이 왜 계속 해결 안되죠? 그냥 잘못된거 아닌가요?

ERROR in src/components/main/Main.tsx:94:67
TS2322: Type '{ results: AnalyzedMessages & any[]; }' is not assignable to type 'IntrinsicAttributes & AnalyzedMessages[]'.
  Property 'results' does not exist on type 'IntrinsicAttributes & AnalyzedMessages[]'.
    92 |       </Container>
    93 |       <Attachment />
  > 94 |       {Array.isArray(results) && results.length !== 0 && <Summary results={results} />}
Failed to compile.

이전에 말씀드린 대로, analyzedMessages 대신에 results를 사용해보세요. 혹시 AnalyzedMessageData 인터페이스를 수정하셨다면, Summary 컴포넌트에 전달하는 props의 타입도 함께 수정하셔야 합니다. 이 부분도 다시 한번 확인해보시기 바랍니다.

 

=> 해결법 3가지 똑같은 것 계속 반복해서 알려주는 바람에 머리가 아픔 

---

해결에 도움 된 글

https://cpro95.tistory.com/656

타입스크립트 React props 전달하는 방법 및 IntrinsicAttributes 오류 해결

---

느낀점

GPT가 해결 못 할 때는 역시 구글센세