[TECH-QA] Intersection Type (&)์ด๋ž€?

  • A & B๋Š” ํƒ€์ž… A์™€ ํƒ€์ž… B์˜ ๋ชจ๋“  ์†์„ฑ์„ ๋™์‹œ์— ๋งŒ์กฑํ•˜๋Š” ์ƒˆ๋กœ์šด ํƒ€์ž…์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.
  • ์ฆ‰, ๊ฒฐ๊ณผ ํƒ€์ž…์€ A์™€ B์˜ ์†์„ฑ์„ ๋ชจ๋‘ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.
  • ์˜ˆ๋ฅผ ๋“ค์–ด, AlertModalProps์™€ React.RefAttributes๋ฅผ ๊ฒฐํ•ฉํ•˜๋ฉด, ์ƒˆ๋กœ์šด ํƒ€์ž…์€ AlertModalProps์˜ ๋ชจ๋“  ์†์„ฑ๊ณผ React.RefAttributes์˜ ๋ชจ๋“  ์†์„ฑ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.
interface AlertModalProps {
  title: string;
  message: string;
  onClose: () => void;
}

const AlertModal = React.forwardRef<HTMLDivElement, AlertModalProps>(
  ({ title, message, onClose }, ref) => {
    return (
      <div ref={ref}>
        <h1>{title}</h1>
        <p>{message}</p>
        <button onClick={onClose}>Close</button>
      </div>
    );
  }
);

// ํƒ€์ž… ์ •์˜
type AlertModalComponent = React.ForwardRefRenderFunction<
  HTMLDivElement,
  AlertModalProps & React.RefAttributes<HTMLDivElement>
>;
์—ฌ๊ธฐ์„œ AlertModalProps & React.RefAttributes๋Š” AlertModalProps์˜ ์†์„ฑ(title, message, onClose)๊ณผ React.RefAttributes์˜ ์†์„ฑ(ref)์„ ๋ชจ๋‘ ํฌํ•จํ•˜๋Š” ํƒ€์ž…์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.
const modalRef = React.useRef<HTMLDivElement>(null);

<AlertModal
  title="๊ฒฝ๊ณ "
  message="์ด๊ฒƒ์€ ๊ฒฝ๊ณ  ๋ฉ”์‹œ์ง€์ž…๋‹ˆ๋‹ค."
  onClose={() => console.log("๋‹ซ๊ธฐ")}
  ref={modalRef}
/>;
React.RefAttributes๋Š” ref ์†์„ฑ์„ ์ถ”๊ฐ€๋กœ ์ œ๊ณตํ•˜๋ฏ€๋กœ, AlertModalProps์— ref๋ฅผ ์ง์ ‘ ํฌํ•จํ•˜์ง€ ์•Š๊ณ ๋„ ref๋ฅผ ์ง€์›ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.