React.forwardRef
ref
, key
와 같은 특별한 키워드는 props
으로 상속할 수 없다
하지만 ref
를 상속해야하는 경우가 생긴다면 어떻게 해야할까?
프로젝트에 React.forwardRef
가 있어 이를 찾아봤다
1. React.forwardRef
ref
를 전달 받아 하위 컴포넌트에 전달할 수 있게 해준다
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// 이제 DOM 버튼으로 ref를 작접 받을 수 있습니다.
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
위 코드를 보면 React.forwardRef
의 2번째 arg로 상위 컴포넌트에서 ref
를 전달받은 것을 알 수 있다
전달받은 ref
가 button
과 연결되었기 때문에 상위 컴포넌트에서의 ref
변수는 이제 <button>
을 가리키게 된다
console.log(ref.current) // <button> DOM node
2. TL; DR
부득이하게 ref
를 하위 컴포넌트에 전달하고 싶을 때 사용하는 것이 React.forwardRef
이다
기본적인 사용법은 다음과 같다
const SomeComponent = React.forwardRef((props, ref) => (
{/* return jsx */}
));
React.forwardRef
의 2nd arg로 ref
를 받으며,
1st arg로는 일반적인 props
를 받는다
*References
Author And Source
이 문제에 관하여(React.forwardRef), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ayaan92/React.forwardRef저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)