- 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๋ฅผ ์ง์ํ ์ ์๊ฒ ๋ฉ๋๋ค.