TS - setState 갱신함수 props로 전달하기

1. 부모에서 자식으로 갱신함수 props로 전달

  const [areaSelected, setAreaSelected] = useState<string>('');
// ..
<AreaFilter setAreaSelected={setAreaSelected} />

2. 자식 컴포넌트에 갱신함수 타입정의 후 사용

• 리턴 값 명시적으로 설정안한 경우 (비추)
  리턴 값을 반환하지 않는 경우에 사용해야하는데 무분별하게 남발하는 것은 바람직하지 않음

interface AreaProps {
  setAreaSelected: () => void  // 리턴 값을 반환하지 않는 경우 사용
}

• ✅ 갱신함수 타입 정의
  • import 해서 사용하는 경우

  import { Dispatch, SetStateAction } from 'react';
  // ...
  interface Props {
   상태갱신함수명 : Dispatch<SetStateAction<해당타입정의>>; //타입 정의
  }

  • import없이 React.~로 사용하는 경우

  interface AreaProps {
    setAreaSelected: React.Dispatch<React.SetStateAction<해당타입정의>>;
  }

사용 예시

import { Dispatch, SetStateAction } from 'react';

interface AreaProps {
  setAreaSelected: React.Dispatch<React.SetStateAction<string>>;
}
export default function 함수명({ setAreaSelected }: AreaProps){
  //..
  setAreaSelected((e.target as any).textContent);//전달받은 갱신함수 사용
}