ref를 props로 전달하기 위한 forwardRef()

• function컴포넌트에서 ref는 props로 넘겨줄 수 없다
  forwardRef로 감싸주고 두번째 인자로 ref를 넘겨줘야한다

• https://reactjs.org/docs/react-api.html#reactforwardref

---

(App.js)
function App() {
  const modalRef = useRef(null);
  return (
    <>
      <Form modalRef={modalRef} /> // 여기에 modalRef 전달
      <Modal ref={modalRef} />
    </>
  );
}

export default App;

---

(Modal.jsx)
import React, { forwardRef } from "react";

const Modal = (props, ref) => {
  return (
    <dialog ref={ref}>
    	~
    </dialog>
  );
};

export default forwardRef(Modal);
  
// const Modal = forwardRef((props, ref) => {
//  return (
//    <dialog ref={ref}>
//    	~
//    </dialog>
//  );
//});

//export default Modal;

• 상위 App컴포넌트에 useRef 선언
• Modal 컴포넌트에 modalRef prop 전달
• ref를 dialog 엘리먼트를 참조
• 참조한 dialog 엘리먼트를 App 컴포넌트의 modalRef에 저장

---

주의해야할점

1. <Form modalRef={modalRef}/>
2. <Modal ref={modalRef} />
  
  const Modal = forwardRef((props, ref) => {
    return (
      <dialog ref={ref}>
      </dialog>
    );
  });

• 1번은 함수형 컴포넌트를 forwardRef로 감싸주지 않아도 에러 발생하지 않는다
  그 이유는 ref는 DOM 엘리먼트에 접근하는데 react로 커스텀한 컴포넌트는 DOM 엘리먼트를 가지지 않는다
  정확히 ref라는 용어를 사용할때만 forwardRef 사용
• 다시말해, 1번은 단순히 modalRef를 받은것이고
  2번은 ref로 Modal컴포넌트를 직접 제어하여 dialog엘리먼트에 접근한 것