[REACT] useImperativeHandle, forwardRef hook

자식 컴포넌트의 ref 값을 부모 컴포넌트에서 사용하기 위해 고안한 훅인듯 하다.

 

[부모 컴포넌트]

function App() {
  const audioRef = useRef();
  const onPlay = () => {
    audioRef.current.play();
  };
  return (
    <div className="App">
      <div className="container">
        <ProgressArea ref={audioRef} />
      </div>
    </div>
  );
}

 

[자식 컴포넌트]

import React, { useRef,useImperativeHandle, forwardRef } from 'react';

function ProgressArea(props, ref) {
  const audio = useRef();
  useImperativeHandle(ref, () => ({
    play: () => {
      audio.current.play();
    },
  }));
  
  return (    
    <audio
      autoPlay
      ref={audio}
      src={music1}
    ></audio>
  );
}

export default forwardRef(ProgressArea);

 

부모 컴포넌트에서 ref를 선언하고,

자식 컴포넌트에 props로 (props,ref)를 받아서

useImperativeHandle에 ref를 인자로 받고, 메서드로 처리한다.

마지막에 export할때는 forwardRef로 내보내야 한다.

 

useImperativeHandle과 forwardRef는 짝꿍이다.

 

다만, 리엑트에서는 ref사용을 권장하지 않으므로, redux,contextAPI등을 활용하는 것이 좋다.

(소소하게만 사용해야겠다.)

 

참고 : https://developer-alle.tistory.com/372