CreatePortal, forwardRef,useImperativeHandle

createPortal

특정 컴포넌트를 지정한 위치로 렌더 시키고자 할때 사용되는 api

createPortal(위치시킬 컴포넌트, 지정할 위치)

아래 예제 같은 경우 id가 modal인 위치에 컴포넌트를 렌더 시켜주었다.

부모 컴포넌트의 바깥에 컴포넌트를 렌더 시킬 때 자주 쓰인다.

Modal.jsx

	const Modal = ({children}) => 
ReactDom.createPortal(children, document.querySelector("#modal"));
export default Modal;

App.js

<div>
  	<button>버튼</button>
	<Modal>모달창</Modal>  
</div>

index.html

<div id="root">
  <div>
  	<button>버튼</button>  
  </div>
</div>
<div id="modal">
  	<div> 
		<Modal>모달창</Modal>  
	</div>
</div>

forwardRef

상위 컴포넌트의 ref를 하위 컴포넌트의 ref로 props로 보낼 때 사용

자식 컴포넌트를 forwardRef로 감싸준다

App.jsx

  const myRef = useRef();

  return (
      <MyInput ref={myRef} />
  );

MyInput.jsx

export default React.forwardRef(
  function MyInput(props, ref) {
  	return (
    	<input ref={ref} />
    ) 
  }
);

useImperativeHandle

ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 사용자화(customizes)합니다.

즉, 부모 컴포넌트의 ref에서 자식의 ref를 접근 할 수 있도록 한다.

아래의 코드에서는 부모의 audioRef가 audioRef.current.play()를 호출 할 수 있다.

useImperativeHandle과 forwardRef은 같이 사용 해야 한다.

부모 컴포넌트

const audioRef = useRef();
const onPlay = useCallback(() => {
	audioRef.current.play();
}, []);

return <ProgressArea ref={audioRef} />

자식 컴포넌트

function ProgressArea(props, ref) {
  const audio = useRef();

  useImperativeHandle(ref, () => ({
      play: () => {
        audio.current.play();
      },
  }));

  return <audio ref={audio}></audio>
}

export default forwardRef(ProgressArea);