[React + TS] "Dispatch<SetStateAction<boolean>>; }' is not assignable to type 'IntrinsicAttributes'"

 

Dispatch<SetStateAction<boolean>>; }' is not assignable to type 'IntrinsicAttributes'
에러 해결 과정을 담은 글이다.

부모 컴포넌트(calendarPage.tsx)

import React from 'react';
import { CalendarPageContainer } from './styles';
import { CalendarPageTitle } from './styles';
import { AdventCalendarBox } from './styles';
import { CalendarDetail } from '../calendarDetail';

export function CalendarPage() {
  // 모달창 노출 여부
  const [calendarOpen, setCalendarOpen] = React.useState<boolean>(false);
  // 모달창 노출
  const showCalendar = () => {
    setCalendarOpen(true);
  };
  return (
    <CalendarPageContainer>
      <CalendarPageTitle>어드벤트 캘린더 페이지</CalendarPageTitle>
      <AdventCalendarBox onClick={showCalendar}>day n</AdventCalendarBox>
      {calendarOpen && <CalendarDetail setCalendarOpen={setCalendarOpen} />}
    </CalendarPageContainer>
  );
}

-  setState 함수인 setCalendarOpen 함수를 props로 전달해준다.

 

자식 컴포넌트(calendarDetail.tsx)

import React from 'react';

type CalendarDetailProps = {
  setCalendarOpen: React.Dispatch<React.SetStateAction<boolean>>;
};

export function CalendarDetail(props: CalendarDetailProps) {
  return (
    <div
      onClick={() => {
        props.setCalendarOpen(false);
      }}
    >
      <h1>CalendarDetail</h1>
    </div>
  );
}

자식 컴포넌트에서 전달받은 Props의 타입을 명시해주지 않아 발생한 문제였다.

해결 방법은 다음과 같다.

 

1. props 전체를 CalendarDetailProps로 선언해준다.

2. props의 요소 중 setCalendarOpen 함수(여기서는 유일한 props)의 타입을 확인한 뒤 명시해준다.

3. props로 전달받은 함수를 사용해야 하는 위치에서 props.함수명으로 호출한다.

4. 부모 컴포넌트의 state가 잘 변경되는 것을 확인할 수 있다.

 

결과