[0626] 타입스크립트 심화 : Hook, Event의 타입

useState

const [count, setCount] = useState<number>(0);

useRef

const titleElRef = useRef<HTMLInputElement>(null);

useContext

type ModalContextValue = {
  open: (element: React.ReactElement) => void;
  close: () => void;
};
const initialValue: ModalContextValue = {
  open: () => {},
  close: () => {},
};
const ModalContext = createContext<ModalContextValue>(initialValue);

export const useModal = () => useContext(ModalContext);

export function ModalProvider({ children }: { children: React.ReactNode }) {
  const [modalElement, setModalElement] = useState<React.ReactElement | null>(
    null
  );
  const open: ModalContextValue["open"] = (element) => {
    setModalElement(element);
  };
  const close: ModalContextValue["close"] = () => {
    setModalElement(null);
  };

  return (
    <ModalContext.Provider value={{ open, close }}>
      {children}
      {modalElement}
    </ModalContext.Provider>
  );
}

tanstack query (1) useQuery

const { data: posts = [] } = useQuery<Post[]>({
  queryKey: ["posts"],
  queryFn: () => axios.get(endpoint).then((res) => res.data),
});

tanstack query (2) useMutation

const { mutateAsync: createPost } = useMutation<
      unknown,
      DefaultError,
      { title: string; body: string }
>({
  mutationFn: (data) => axios.post(endpoint, data),
});

Event Handler

const handleChangeUnit = (e: React.ChangeEvent<HTMLInputElement>) => {
  setUnit(Number(e.target.value));
};