forwardRef, useImperativeHandle

forwardRef

reference를 다른 곳으로 넘겨주기 위해서 사용하는 method

const Parent = (props) => {
  const ref = useRef();
  return <Child ref={ref}/>
}
const Child = React.forwardRef((props, ref) => {
  return <input ref={ref}/>
})

forwardRef의 문제점

forwardRef의 문제점은 Parent에서 ref에 무엇이 들어가던지, 무조건 그에 관련된 코드를 실행시킬 것이다. 만약에 Child에서 ref를 설정하지 않았다면? Parent에서 ref가 Null이 될테니 코드가 검증되지 않는다.

문제 해결 방법

문제를 해결하는 방법은 useImplerativeHandle을 이용하여 ref와 data를 mapping 해주는 방법이 있다.

const Parent = (props) => {
  const ref = useRef();
  return <Child ref={ref}/>
}
const Child = React.forwardRef((props, ref) => {
  const [value, valueChange] = useState("");
  useImplerativeHandle(ref, () => ({ value }));
  // ref.current와 { value: value }를 맵핑시켜서, value가 변경되면 ref.current도 변경됨
  return <input 
           ref={ref} 
           onChange={(e) => valueChange(e.target.value)} 
           value={value}
         />
})