Ref전달은 컴포넌트를 통해 자식 중 하나에 ref를 전달하는 기법입니다. 일반적으로 사용되지 않지만, 재사용이 가능한 컴포넌트에 유용할 수 있습니다.
DOM에 refs 전달하기
button, input등의 ref를 조작할 필요가 있을 수 있습니다. 이러한 경우에는
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
const ref = React.creatRef();
<FancyButton ref={ref}>click me</FancyButton>
JavaScript
복사
1.
React.createRef 를 통해서 React ref를 생성하고 ref변수에 할당합니다.
2.
ref={ref} 로 전달합니다.
3.
props 내부에서 함수의 두번째 인자로 전달합니다.
4.
속성을 지정해서 <Button ref={ref}>로 전달합니다.
5.
이렇게 되면 ref.current 는 <Button>을 가르키게 됩니다.
단! ref인자는 정의한 경우에만 사용할 수 있습니다. 일반 함수나 컴포넌트의 경우 ref를 받지도 않고, 사용할 수 도 없습니다.
고차 컴포넌트HOC에서 ref전달하기
key와 마찬가지로 ref는 React에서 다르게 처리합니다. HOC에 ref를 추가하면 ref는 래핑 된 컴포넌트가 아닌 가장 바깥쪽 컨테이너 컴포넌트를 참조합니다.
하지만 React.forwardRef API를 사용하여 내부 컴포넌트에 ref를 선언을 통해 명시적으로 전달할 수 있습니다.
DevTools에 사용자 정의 이름 표시하기
React.forwardRef는 렌더링 함수를 받는데 이를 이용하여 전달 컴포넌트에 무엇을 표시할지 정의할 수 있습니다.
const WrappedComponent = React.forwrdRef((props, ref)=>return<Log forswardedRef={ref}>);
JavaScript
복사
이때 익명함수가 아닌 렌더링 함수 이름을 지정할 수도 있습니다.
이러한 방법 말고도 displayName속성을 설정할 수도 있습니다.
function forwardRef((props, ref){ return <LogProps {...props} forwardRef={ref} />}
forwardRef.displayName = 'nameing'
JavaScript
복사