1. children 사용하는 컴포넌트에서 오류날 때

React.ReactNode로 타입 지정

type FlexItemsCenterProps = {
  children: React.ReactNode;
};

const FlexItemsCenter = ({ children }: FlexItemsCenterProps) => {
  return <div className="flex flex-col items-center">{children}</div>;
};

export default FlexItemsCenter;

2. onclick 핸들러를 props로 받을 때

핸들러를 정의하는 부모 컴포넌트

const [modal, setModal] = useState<boolean>(false);

  const modalHandler = (): void => {
    setModal(!modal);
  };

useState에 타입을 지정해주고,
반환하는 값이 없는 함수에는 : void로 타입을 지정한다

핸들러를 props로 받는 자식 컴포넌트

props의 타입을 지정해준다.
핸들러는 위에서 반환하는 값이 없는 함수로 지정해줬기 때문에,
똑같이 void로 지정.

ref를 사용할 때에는 Html요소를 타입으로 지정해준다.
마우스 행동이 일어나는 e 파라미터도 타입을 지정해줘야 하는데
나는 아래처럼 했다.
Div태그에다 썼기 때문에 div로 지정해주었다.
vscode를 쓰면 타입 에러된 부분에 마우스를 갖다대면
어떤 타입으로 해야하는지 설명이 되어 있다.
참고하면서 타입을 지정하면 좋다!

type ModalProps = {
  modalHandler: () => void;
};

const Modal = ({ modalHandler }: ModalProps) => {
  const modalRef = useRef<HTMLDivElement>(null);

  const modalOutSideClick = (
    e: React.MouseEvent<HTMLDivElement, MouseEvent>
  ) => {
    if (modalRef.current === e.target) {
      modalHandler();
    }
  };