[React] TS Custom Hooks 버튼 클릭시 재사용

클릭할때마다 boolean 값이 바뀌게 하는 로직을 여러 컴포넌트에서 구현 했다. 코드를 하나로 줄여 재사용 하기위해 커스텀 훅으로 만들었다.

구조는 src -> hooks -> useClick.ts

//useClick.ts

const useClick = () => {
  const [isClick, setIsClick] = useState(false);

  const clickHandler = () => {
    setIsClick(!isClick);
  };

  return [isClick, clickHandler];
};

위와 같이 만들고 불러와 onClick 이벤트에 사용하려고 하니 레드라인이 괴롭혔다.

const App = () => {
  const [isClick, clickHandler] = useClick();
  return(
  	<Component>
    	<ChildComponent onClcik={clickHandler} /> // 에러
    	<ChildComponent2 props={isClick} /> // 에러
    <Component>
  )
}

(property) onClick?: React.MouseEventHandler<HTMLDivElement> | undefined 이 호출과 일치하는 오버로드가 없습니다 ...

커스텀훅에 타입을 지정하지 않아 생긴 에러이다.

[boolean, () => void] 배열 안에 불리언, 함수를 커스텀훅 리턴 타입을 지정해준 뒤 정상 작동했다.

//useClick.ts

const useClick = () : [boolean, () => void] => {
  const [isClick, setIsClick] = useState(false);

  const clickHandler = () => {
    setIsClick(!isClick);
  };

  return [isClick, clickHandler];
};