import * as React from "react" ; type InputProps = React . HTMLProps < HTMLInputElement > ; const Child = React . forwardRef < HTMLInputElement , InputProps > ( ( props , ref ) => { const inputRef = React . createRef < HTMLInputElement & { sayHello : ( ) => void ; } > ( ) ; React . useImperativeHandle ( ref , ( ) : any => ( { sayHello : ( ) => { console . log ( "반갑습니다. 김상헌입니다." ) ; } , focus : ( ) => { inputRef . current ?. focus ( ) ; } , } ) , [ inputRef ] ) ; return ( < React . Fragment > < input type = "text" ref = { inputRef } className = "FancyButton" / > < /React.Fragment>); } ) ; const Parent = ( ) => { const inputRef = React . createRef < HTMLInputElement & { sayHello : ( ) => void ; } > ( ) ; React . useEffect ( ( ) => { } , [ ] ) ; return ( < React . Fragment > < Child ref = { inputRef } / > < button onClick = { ( ) => { inputRef . current ?. focus ( ) ; } } > input에 focusing해보자 . < /button> < button onClick = { ( ) => { inputRef . current ?. sayHello ( ) ; } } > 안녕하세요 해보자 . < /button> < /React.Fragment>); } ; export default Parent ;