훅

const [state, setState] = useState(false);
// `state`는 boolean으로 추론됨
// `setState`는 boolean만 받음

const [user, setUser] = useState<User | null>(null);

// 나중에...
setUser(newUser);

const [user, setUser] = useState<User>({} as User);

// 나중에...
setUser(newUser);

const memoizedCallback = useCallback(
  (param1: string, param2: number) => {
    console.log(param1, param2)
    return { ok: true }
  },
  [...],
);
/**
 * VSCode에서 다음과 같은 타입을 보여줍니다.
 * const memoizedCallback:
 *  (param1: string, param2: number) => { ok: boolean }
 */

function useCallback<T extends (...args: any[]) => any>(
  callback: T,
  deps: DependencyList
): T;

function useCallback<T extends Function>(
    callback: T, deps: DependencyList): T;

// @ts-expect-error 매개변수 'e'는 암묵적으로 'any' 타입을 가집니다.
useCallback((e) => {}, []);
// 명시적 'any' 타입.
useCallback((e: any) => {}, []);

import { useReducer } from "react";

const initialState = { count: 0 };

type ACTIONTYPE =
  | { type: "increment"; payload: number }
  | { type: "decrement"; payload: string };

function reducer(state: typeof initialState, action: ACTIONTYPE) {
  switch (action.type) {
    case "increment":
      return { count: state.count + action.payload };
    case "decrement":
      return { count: state.count - Number(action.payload) };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "decrement", payload: "5" })}>
        -
      </button>
      <button onClick={() => dispatch({ type: "increment", payload: 5 })}>
        +
      </button>
    </>
  );
}

function DelayedEffect(props: { timerMs: number }) {
  const { timerMs } = props;

  useEffect(
    () =>
      setTimeout(() => {
        /* 할 일 */
      }, timerMs),
    [timerMs]
  );
  // 나쁜 예! setTimeout은 중괄호로 함수 본문을 감싸지 않아 숫자를 암묵적으로 반환함
  return null;
}

function Foo() {
  // - 가능하다면 가능한 한 구체적으로 지정하세요. 예를 들어, HTMLDivElement가
  //   HTMLElement보다 낫고 Element보다 훨씬 낫습니다.
  // - 기술적으로 이는 RefObject<HTMLDivElement>를 반환합니다.
  const divRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // ref.current가 null일 수 있습니다. 
    // 이는 ref-ed 요소를 조건부로 렌더링하거나 할당하는 것을
    // 잊었을 수 있기 때문에 예상된 것입니다.
    if (!divRef.current) throw Error("divRef가 할당되지 않았습니다.");

    // 이제 divRef.current는 확실하게 HTMLDivElement입니다
    doSomethingWith(divRef.current);
  });

  // 리액트가 관리할 수 있도록 요소에 ref를 제공하세요
  return <div ref={divRef}>등등</div>;
}

const divRef = useRef<HTMLDivElement>(null!);
// 나중에... null인지 확인할 필요 없음
doSomethingWith(divRef.current);

function Foo() {
  // 기술적으로, 이는 MutableRefObject<number | null>을 반환합니다
  const intervalRef = useRef<number | null>(null);

  // 참조를 직접 관리합니다 (이것이 MutableRefObject라고 불리는 이유입니다!)
  useEffect(() => {
    intervalRef.current = setInterval(...);
    return () => clearInterval(intervalRef.current);
  }, []);

  // 참조는 어떤 요소의 "ref" prop에도 전달되지 않습니다
  return <button onClick={/* 참조에 있는 clearInterval 실행 */}>타이머 취소</button>;
}

// Countdown.tsx

// forwardRef로 전달될 핸들 타입을 정의합니다
export type CountdownHandle = {
  start: () => void;
};

type CountdownProps = {};

const Countdown = forwardRef<CountdownHandle, CountdownProps>(
    (props, ref) => {
  useImperativeHandle(ref, () => ({
    // start()는 여기에서 타입 추론을 받습니다
    start() {
      alert("시작");
    },
  }));

  return <div>카운트다운</div>;
});

// Countdown 컴포넌트를 사용하는 컴포넌트

import Countdown, { CountdownHandle } from "./Countdown.tsx";

function App() {
  const countdownEl = useRef<CountdownHandle>(null);

  useEffect(() => {
    if (countdownEl.current) {
      // start()도 여기에서 타입 추론을 받습니다
      countdownEl.current.start();
    }
  }, []);

  return <Countdown ref={countdownEl} />;
}

import { useState } from "react";

export function useLoading() {
  const [isLoading, setState] = useState(false);
  const load = (aPromise: Promise<any>) => {
    setState(true);
    aPromise.finally(() => setState(false));
  };
  // [boolean, typeof load]로 추론됨, (boolean | typeof load)[] 대신
  return [isLoading, load] as const; 
}