React forwardRef - (feat. 공통 팝업)

forwardRef는 component간 ref를 전달하기 위해 사용하는 Function 입니다. React에서는 ref를 props로 직접전달하지 않고 fowardRef를 통하여 해당 ref를 전달합니다. DOM 엘리먼트로 ref 전달하기 고차 컴포넌트(Higher Order Component)로 ref 전달하기 그러면, 일반적으로 사용될 수 있는 공통 팝업을 통해 구현해보겠습니다. 팝업은, - Transition 효과가 적용되어야 하며 - close 함수를 제공하여햐 합니다. 1. forwardRef를 사용하여 component 생성 - 인자로 props, ref 전달받는 component를 생성합니다. - ref는 해당 팝업의 close함수를 "상위 컴포넌트에서 사용하고자 참조하기 위해서" 사용합니다. // 제공하기 원하는 함수 정의 interface ISlidePopupRef { close(): void; } // props type 정의 type Props = { title...

원문링크 : React forwardRef - (feat. 공통 팝업)