TypeScript 오류 해결 방법

자식 TypeScript에 훅 전달하는 문제

React 개발에서 컴포넌트 내에서 상태와 로직을 관리하기 위해 훅을 사용하는 것은 일반적인 관행입니다. 그러나 때로는 다음과 같은 상황에서 자식 컴포넌트에 훅을 전달할 때 오류가 발생할 수 있습니다:

const Parent = () => {

  const [isActive, setIsActive] = useState(false);

  return (
    <Child isActive={isActive} setIsActive={setIsActive} />
  );
}

이 경우, Parent 컴포넌트에는 isActive 상태를 설정하는 useState 훅과 이를 업데이트하는 함수인 setIsActive가 있습니다. Child 컴포넌트는 다음과 같이 정의됩니다:

type Props = {
  isActive: boolean;
  setIsActive: () => void;
}

const Child = ({ isActive, setIsActive}: Props) => {
  // 컴포넌트
}

그러나 setIsActive 함수를 자식 컴포넌트에 프롭으로 전달하려고 할 때 다음과 같은 오류가 발생합니다:

Type error: Type 'Dispatch<SetStateAction<boolean>>' is not assignable to type '() => void'. TS2322

해결책: Props 타입 수정

이 오류는 자식 컴포넌트의 Props 타입이 잘못되었기 때문에 발생합니다. React는 setIsActive 함수를 값 매개변수(value)를 갖는 Dispatch로 타입화합니다. Dispatch는 다음과 같이 정의됩니다:

type Dispatch<A> = (value: A) => void;

Props 타입에서 값을 위한 인수(value argument)가 누락되어 있습니다. 이를 수정하려면 다음과 같이 Props 타입을 수정하면 됩니다:

type Props = {
  isActive: boolean;
  setIsActive: (active: boolean) => void;
}

이제 Child 컴포넌트는 올바른 Props 타입으로 정의되어야 합니다:

const Child = ({ isActive, setIsActive}: Props) => {
  // 컴포넌트의 나머지 부분
}

이 수정으로 인해 오류가 해결되고 훅을 자식 컴포넌트로 성공적으로 전달할 수 있습니다.

결론

TypeScript로 자식 컴포넌트에 훅을 전달하는 동안 오류를 만나면 프롭을 올바르게 정의하는 것이 중요합니다. 이 경우, Props 타입을 setIsActive 함수의 값 인수를 포함하도록 조정함으로써 문제가 해결되었습니다. 이러한 세부사항에 주의하여 React 프로젝트에서 비슷한 문제를 효과적으로 해결할 수 있습니다.

참고 자료 : 

reactjs